Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] Opóźnienie każdej z pętli
Forum PHP.pl > Forum > Przedszkole
lolarz
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
markuz
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.
lolarz
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
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.