Javascript, uśpienie pętli.

Question

Witam, chciałbym, aby każda linijka w pętli wykonywała się po pewnym czasie, gdyby w JS istniała funkcja sleep, to użyłbym jej. Niestety takiej nie ma, więc muszę posłużyć się inną metodą, jakieś sugestię?

		        <script>
            var kropka1 = document.createTextNode(".");
            var kropka2 = document.createTextNode(".");
            var kropka3 = document.createTextNode(".");
            function dodaj()
            {
                for (let i=0; i<3; i++)
                {
            
                document.getElementById("center").appendChild(kropka1);
                //1s break
                document.getElementById("center").appendChild(kropka2);
                //1s break
                document.getElementById("center").appendChild(kropka3);
                //1s break
                document.getElementById("center").removeChild(kropka1);
                //1s break
                document.getElementById("center").removeChild(kropka2);
                //1s break
                document.getElementById("center").removeChild(kropka3);
                //1s break
        
                }
            }
            window.onload = dodaj;
        </script>

I jeszcze jedno pytanko, mógłby ktoś mi wytłumaczyć, czemu pętla nie reaguje, gdy w argumencie appendChild użyje (kropka+i) albo ("kropka"+i).

	document.getElementById("center").appendChild(kropka+i);

Z góry dziękuję :D

Answer 1

setTimeout, setInterval, bo nie odnosisz sie do i - pozatym jak cchesz wykonac petle, ktora inkrementuje element, gdzie nagle w srodku ma byc on pomniejszany?

Comments

Dzięki za odpowiedź, tyle, że ja chciałem uzyskać efekt wykonywania się każdej linijki kodu w funkcji po określonym czasie, a próba poniższego zastosowania setTimeout niestety nie działa

function dodaj()
				for (let i=0; i<3; i++)
                {
				{
		
				setTimeout(function(){ document.getElementById("center").appendChild(kropka1);},1000);
				setTimeout(function(){ document.getElementById("center").appendChild(kropka2);},2000);
				setTimeout(function(){ document.getElementById("center").appendChild(kropka3);},3000);
				setTimeout(function(){ document.getElementById("center").removeChild(kropka1);},4000);
				setTimeout(function(){ document.getElementById("center").removeChild(kropka2);},5000);
				setTimeout(function(){ document.getElementById("center").removeChild(kropka3);},6000);
{
{

Jeżeli polecenia są po za pętla również.

---

A to ciekawe:) specjalnie dla Ciebie w prostej i przystepnej formie.  Zastanow sie co jeszcze mozna tam zmienic aby to lepiej wygladalo (a duzo mozna).

 

<div id=container" style="width:100px;height:100px;size:30px;color:black;font-weight:bold;background:white;">
<div id="center"></div>
</div>
         <script>
            var kropka1 = document.createTextNode(".");
            var kropka2 = document.createTextNode(".");
            var kropka3 = document.createTextNode(".");
            function dodaj()
            {
                for (let i=0; i<3; i++)
                {
setTimeout(function()
{
                document.getElementById("center").appendChild(kropka1);
                //1s break
}, 1000);
setTimeout(function()
{
                document.getElementById("center").appendChild(kropka2);
                //1s break
}, 2000);
setTimeout(function()
{
                document.getElementById("center").appendChild(kropka3);
                //1s break
}, 3000);
setTimeout(function()
{
                document.getElementById("center").removeChild(kropka1);
                //1s break
}, 4000);
setTimeout(function()
{
                document.getElementById("center").removeChild(kropka2);
                //1s break
}, 5000);
setTimeout(function()
{
                document.getElementById("center").removeChild(kropka3);
                //1s break
}, 6000);
                }
            }
            window.onload = dodaj;
        </script>

 

---

Dzięki za poprawę stylistyczną tekstu, rzeczywiście nie przykładam jeszcze do tego wagi, a pomysłu na poprawną realizację tego co chce osiągnąć niestety nie mam, myślałem jeszcze, żeby zastosować funkcję setTimeout na funkcję appendChild(jak poniżej), ale również nie działa.

setTimeout(document.getElementById("center").appendChild(kropka1),1000);

 

---

Na razie nie martw sie zbytnio o stylistyke. Baw sie na mniejszych elementach, laczac je w calosc tylko wtedy gdy dokladnie nauczysz sie jak dzialaja.

 

Najpierw stworz sobie loopa zobacz co i jak. POtem dodaj i odejmij elementy w DOM (drzewku html - czyli na stronie), itd.

 

Mam nadzieje ze znasz angielski wtedy pomoze ci w3school (przyklady!) a potem mozilla.

https://www.w3schools.com/js/js_loop_for.asp - przyklady!

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration - dobre spojne wyjasnienie dla troche bardziej zaawansowanych.

 

Po polsku tez na pewno cos znajdziesz, szukaj, oglodaj na youtube jak nauczysz sie podstaw to pokombinuj jak nie bedziesz mogl rozwiazac problemu to sie zglos.

---

Nie wiem czy za dużo nie wymagam, uczę się programowania od nie dawna, więc moje funkcję zachowawcze w tym środowisku, szczególnie gdy jakiś kod mi nie wychodzi, nie najlepiej działają, tym bardziej biorąc pod uwagę to, że w przeciwieństwie do innych środowisk, tutaj prosząc o pomoc na forum, trzeba być "zaangażowanym" w swój problem. Jednak wydaję mi się, mimo  że znam podstawy pętli  siedzę nad tym kodem jakiś czas,  nadal nie mam pomysłu :D

Wywołanie setTimeout'a dużo mi nie daję, bo cała funkcja wywołuję się w przeciągu chwili, co sprawia, że kropki, które chciałbym aby pojawiały i znikały po kolei, w określonych odstępach czasowych, pojawiają i znikają błyskawicznie, co nie daje zamierzonego efektu. Również w js, nie ma funkcji sleep(), jak np w innych językach programowania, a zastosować SetTimeout'a na jedno polecenie się chyba nie da, lub nie umiem(wrzucałem moją próbę wcześniej)

Btw. chciałem, żeby pętla for wykonała się 3 razy, stąd index=3, piszę to dla pewności,  możliwe, że przez pryzmat, tego , że jestem maksymalnie początkujący, pomyślałeś, że chciałem w jakiś magiczny sposób sobie pomóc z zamierzanym efektem :D

---

@Fillo, jeśli pytasz o możliwość "uśpienia" kodu JavaScript, to domyślam się że nie wiesz na czym polega asynchroniczność - a bez jej zrozumienia trudno będzie Ci poradzić sobie dalej (obsługa eventów, komunikacja przez HTTP, praca z Workerami itd.). Polecam więc obejrzeć tą prezentację i przeczytać tę książkę (przynajmniej pierwszy rozdział).

---

@Fillo, zastosowales ten kod co podalem? Nadal masz z tym problem?