Problem z var i.

pytanie zadane 8 grudnia 2015 w JavaScript przez ShiroUmizake Nałogowiec (46,300 p.)

window.onload = function changeColor ()
{
var i=0;
var id = setInterval ( function(){changeColor()}, 2000);
if(i <= 5)
	{
	arr[i].style.backgroundColor = "white";
	i++;
	}
	else if(i >= 5)
	{
	var i=0;
	}
	alert(i);
}

Cokolwiek bym nie zrob sił. I zawsze jest równe, ponieważ var i jest równe zero i nie przydziela mu swojej nowej wartośći. Jakieś pomysły, jak tego unikać albo jak rozwiązać ten problem.

4 odpowiedzi

odpowiedź 8 grudnia 2015 przez Comandeer Guru (602,340 p.)
wybrane 8 grudnia 2015 przez ShiroUmizake

Najlepsza

JS ma zasięg funkcyjny, więc zmienna i istnieje wewnątrz wywoływanej funkcji changeColor. Z tego powodu przy każdym kolejnym wywołaniu tej funkcji zmienna jest tworzona na nowo z wartością równą 0.

Osobiście do window.onload przypisałbym funkcję anonimową, a dopiero w niej zadeklarował funkcję changeColor, a na zewnątrz niej - zmienną i.

komentarz 8 grudnia 2015 przez Magicone Nałogowiec (45,100 p.)

liczyłem, że zasugerujesz użycie listenera, a nie .onload :vv

komentarz 8 grudnia 2015 przez Comandeer Guru (602,340 p.)

To też ;) Zaproponowałem najprostsze rozwiązanie.

Osobiście przerzuciłbym to na koniec body i po prostu otoczył IIFE.

komentarz 8 grudnia 2015 przez ShiroUmizake Nałogowiec (46,300 p.)

Listener nie lubi zbytnio window :). Po głębszym zastanowieniu zrobię to w CSS :). Już mam sporą obciążoną pamieć przeglądarki.

PS: Po setInterval-u zacięło mi tak kompa, że przy ponownym uruchomieniu sprawdzał czy RAM przypadkowo się nie uszkodził.

komentarz 8 grudnia 2015 przez Comandeer Guru (602,340 p.)

Listener nie lubi zbytnio window :)

Hę? A to niby czemu?

komentarz 9 grudnia 2015 przez Magicone Nałogowiec (45,100 p.)

Bo chyba nie wie, czym się różni event document.DOMContentLoaded od window.load... :) PS. interval raz, że jest wykonywany z poziomu silnika JS przeglądarki, która w razie wtopy zatrzyma skrypt, dwa, że jest to jak podejrzewam spowodowane nieumiejętnym posługiwaniem się tą funkcją.

moje rozwiązanie:

window.addEventListener('load', function() {
	var i = 0;

	function changeColor() {
		if(i <= 5) {
			arr[i].style.backgroundColor = '#fff';
			i++;
		}
		else {
			i = 0;
		}

		alert(i);
		setTimeout(changeColor, 2000);
	};

	changeColor();
}, false);