sleep() w js?

Question

Cześć Wam,

otóż spotkałem na mej ścieżce obalone drzewo, sam nie dam rady go przenieść, więc proszę o pomoc... 

Mam taką funkcję draw(), która odpowiada za zmienianie zdjęcia co chwile, aby uzyskać efekt taki jakby leciał. Pamiętam, że w C++ była przemiła instrukcja sleep(ms), co pozwalało na wstrzymywanie programu na określony czas. Tutaj w tym poniższym kodziem też mi się przydaje, ale nie mam pojęcia dlaczego errory wyskakują za każdym razem jak ona zostaje użytkowana, choć działa poprawnie, a jeśli spróbuję zamiast sleep(2000) ten sposób z setTimeout(), co znalazłem podczas poszukiwań, to nie chce mi trybić kodzik... Ma ktoś jakąś ideę? 

var spriteMain = document.getElementById('imgSprite');
var loop = 0;
var whichWay = 2; //odpowiada za obrócenie się ptaka po czwartej pętli

function draw(){
    do{
		loop++;
		
		if(whichWay == 1){ //1 = w prawo ma być obrócony
			spriteMain.src = 'img/' + loop + 'o.png';
			sleep(2000);
		
			if(loop == 4){
				whichWay = 2;
				loop = 0
				console.log(loop); //nawet się nie odpala ten if
			}
		} else if(whichWay == 2){ //2 = w lewo ma być obrócony
			spriteMain.src = 'img/' + loop + '.png';
			sleep(2000);
		
			if(loop == 4){
				whichWay = 1;
				loop = 0
			}
		}
	}while(interval);
}

var interval = setInterval(draw, 1000);

I przy okazji, może ktoś wcześniej na to wpadnie, dlaczego loop nie słucha się if'a, i się nie resetuje do zera po czwartej pętli? Czemu wgl ten if nie załącza się?

Comments

kod przekształcony:

var loop = 0;
var whichWay = 1;

function draw(){
    do{
		loop++;
		console.log(loop);

		if(loop == 4 && whichWay == 1){
			whichWay = 2;
			loop = 0;
		} else if(loop == 4 && whichWay == 2){
			whichWay = 1;
			loop = 0;
		}
		
		if(whichWay == 1){
			spriteMain.src = 'img/' + loop + 'o.png';
			sleep(2000);
		} else if(whichWay == 2){
			spriteMain.src = 'img/' + loop + '.png';
			sleep(2000);
		}
		
	}while(interval);
}

var interval = setInterval(draw, 1000);

- loop się resetuje,

- czy to możliwe, że przez sleep(ms) reszta kodu się nie wykonuje?

---

Dlaczego wgl setInterval nie działa jak powinien, wykonuje się od razu jak by ms były ustawione na 0, a nie na 1000? Bo tak w sumie powinno być, jak jest sleep() tylko wtedy działa, ale i tak errory wyskakują..

---

Dobra już chyba wiem dlaczego, interwał jest ustawiony na funkcję draw(), a nie na pętlę ...

Chyba zdążę samemu to naprawić :)

Answer 1

W JavaScript nie ma funkcji sleep. Jest natomiast setTimeout, ale on nie działa na zasadzie usypiania (pauzowania) wykonywanego kodu, tylko opóźnia jego wykonanie o podany czas - właściwie to o co najmniej podany czas, bo jeśli podasz np. 1000 ms, to kod może wykonać się po 1500 ms, albo jeszcze później (zależy co w danym czasie dzieje się synchronicznie i jak szybko runtime obsłuży asynchroniczną akcję). Jeśli chcesz zasymulować pauzowanie kodu, to skorzystaj z kombinacji async/await wraz z Promisem owijającym setTimeout.

setInterval (podobnie do setTimeout) zwraca identyfikator, na podstawie którego możesz go zatrzymać. AFAIK zakres tych idków zaczyna się od 1, a więc do while przekazujesz wartość 1, która jako boolean jest traktowana jako true, dlatego pętla w obecnym kształcie działa w nieskończoność (nie licząc ifów, które nie działają).

dlaczego loop nie słucha się if'a, i się nie resetuje do zera po czwartej pętli? Czemu wgl ten if nie załącza się?

Ponieważ - w pierwszym kodzie - if sprawdzający zmienną loop jest za wywołaniem nieistniejącej funkcji sleep, co rzuca błędem.

- loop się resetuje,

W jakim sensie? Uruchamiając ten kod w konsoli zauważyłem błąd dotyczący braku zdefiniowanej zmiennej spriteMain oraz wartość zmiennej loop jest inkrementowana.

- czy to możliwe, że przez sleep(ms) reszta kodu się nie wykonuje?

Tak, ponieważ w JS nie ma takiej funkcji.

Comments

Dzięki wielkie mistrzu! Zaraz obadam sytuację z tym promisem :) Bo w tym przekształconym kodzie zapomniałem dołożyć ważnej linijki:

var spriteMain = document.getElementById('imgSprite');

Bo nie spodziewałem się, że ktoś się tak zaangażuje na uruchamianie kodu, a bez index.html i zdjęć ptaka, które są klatkowane, to i tak nie da rady odpalić.

Jeszcze raz wielkie dzięki za zaangażowanie i lecę sprawdzić tego promisa :D