Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [JavaScript] Opóźnienie każdej z pętli
lolarz
post
Post #1





Grupa: Zarejestrowani
Postów: 33
Pomógł: 0
Dołączył: 5.07.2013

Ostrzeżenie: (0%)
-----


Próbuje zrobić coś na kształt paska ładowania w zależności od czasu, ale coś do końca nie działa to tak jakbym oczekiwał:
Kod
function start() {
for (var x = 0; x <= 250; x++) {
    start_load(x);
    }
}
function start_load(x) {
var a = document.getElementById("time").value;
var b = a / 250 * 1000; \\ czas w milisekundach dodawania 1 px paska
    setTimeout(function() { document.getElementById("perc").style.width = x + "px" }, b);
}

Kod
<input id="time" type="text"/>
<div id="main" style="width: 250px">
<div id="perc" style="float: left; height: 100%; width: 0; background: green"></div>
</div>
<button onclick="start()"><b>start</b></button>


Obecnie działa to tak, że dla małych wartości pasek po prostu robi się zielony, a dla większych robi się od razu zielony tylko z jakimś tam opóźnieniem. Co robię nie tak? Dzięki z góry za odp smile.gif
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi (1 - 2)
markuz
post
Post #2





Grupa: Zarejestrowani
Postów: 1 240
Pomógł: 278
Dołączył: 11.03.2008

Ostrzeżenie: (0%)
-----


start_load(x); wywoła Ci się 250 razy w tym samym czasie.
b w ogóle nie jest zależne od x więc będzie takie samo dla każdego wywołania start_load - czyli setTimeout wykona się 250 razy po tym samym czasie (dokładnie bardzo zbliżonym - ale nie zobaczysz różnicy)

Musisz wywołać kolejny setTimout dopiero jak poprzedni się wykona, możesz to zrobić uwzględniając x w b.

Poza tym Twój skrypt jest nie optymalny. Za każdym wywołaniem tworzysz var a - czyli JS musi przeszukać cały dokument 250 razy. A potem jeszcze raz dla perc - czyli będzie interował po elementach DOM 500 razy - można to ograniczyć do 2.

Ten post edytował markuz 27.06.2017, 17:08:01


--------------------
Go to the top of the page
+Quote Post
lolarz
post
Post #3





Grupa: Zarejestrowani
Postów: 33
Pomógł: 0
Dołączył: 5.07.2013

Ostrzeżenie: (0%)
-----


Cytat(markuz @ 27.06.2017, 18:06:30 ) *
Musisz wywołać kolejny setTimout dopiero jak poprzedni się wykona, możesz to zrobić uwzględniając x w b.

A jakaś podpowiedź jak to uwzględnić? bo chciałem żeby to działało tak że każde dodanie 1 px będzie trwało b, a żeby całe ładowanie tego paska trwało tyle co podana wartość to b musi być stałe. Chyba że nie rozumiem co znaczy uwzględnić ten x. Dopiero zacząłem się uczyć js więc za dużo jeszcze nie wiem ;p

Ten post edytował lolarz 27.06.2017, 17:18:31
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 22.08.2025 - 09:12