ugrás a tartalomhoz

setInterval és a globális változók

Mistic97 · 2015. Szep. 6. (V), 23.43
Azt szeretném, hogy egy onmouseover és onmouseout eseménykor egy animált színváltás történne az HTML elemen. Ezt alapvetően a setInterval segítségével oldanám meg, de semmiképp nem akar hozzáférni a globális változókhoz. Utánanéztem googlen, és láttam, hogy nem csak nekem van ezzel bajom, viszont sehogy sem tudok rájönni, hogy hol a hiba és mit kellene csinálnom. Ebben kérnék egy kis segítséget.

Mielőtt még felhoznátok a jQuery-t, el kell mondjam, én inkább egy második megoldásnak tartogatnám. Mivel most tanulom a JS-t ezért nekem egyelőre átláthatóbb lenne a sima JS kód.

A kódom:

function hover(element_class, mouseover, mouseout){
	var element = document.getElementsByClassName("hover");
	function animate(u){
		element[u].onmouseover = function(){
			var divider = 20;
			var f_color_array = mouseover.split(" ");
			var s_color_array = mouseout.split(" ");
			var division_r = f_color_array[0]/divider;
			var division_g = f_color_array[1]/divider;
			var division_b = f_color_array[2]/divider;
			var r = 0;
			var g = 0;
			var b = 0;			
			/*function color(){
				if(f_color_array[0] >= s_color_array[0]){
					r += division_r;
				}else if(f_color_array[0] <= s_color_array[0]){
					r -= division_r;
				}
				if(f_color_array[1] >= s_color_array[1]){
					g += division_g;
				}else if(f_color_array[1] <= s_color_array[1]){
					g -= division_g;
				}
				if(f_color_array[2] >= s_color_array[2]){
					b += division_b;
				}else if(f_color_array[2] <= s_color_array[2]){
					b -= division_b;
				}
				//console.log(r);
			}*/
			var f_interval = setInterval(function(){
				if(f_color_array[0] >= s_color_array[0]){
					r += division_r;
				}else if(f_color_array[0] <= s_color_array[0]){
					r -= division_r;
				}
				if(f_color_array[1] >= s_color_array[1]){
					g += division_g;
				}else if(f_color_array[1] <= s_color_array[1]){
					g -= division_g;
				}
				if(f_color_array[2] >= s_color_array[2]){
					b += division_b;
				}else if(f_color_array[2] <= s_color_array[2]){
					b -= division_b;
				}
			}, 30);
			element[u].style.background = "rgb(" + r + ", " + g + ", " + b + ")";
			if((r >= f_color_array[0]) || (g >= f_color_array[1]) || (b >= f_color_array[2])){
				window.clearInterval(f_interval);
			}//temporary statement
		};
		element[u].onmouseout = function(){
			element[u].style.background = "#D43F3F";
		};
	}
	for(i = 0; i < element.length; i++){
		animate(i);
	}
}
‹ XML_Notepad Gomb submitálásra és ugrásra ›
 ■
1

Tudnál egy rövidebb példa

Karvaly84 · 2015. Szep. 7. (H), 06.22
Tudnál egy rövidebb példa kódot ahol reprodukálható a probléma?

Nem látok globális változókat sem deklarálva sem hivatkozva rájuk.
2

A probléma középen van

Mistic97 · 2015. Szep. 7. (H), 11.08
A probléma középen van, ahol az r, a g és a b változókhoz nem fér hozzá a setInterval.

            var r = 0;  
            var g = 0;  
            var b = 0;            
            var f_interval = setInterval(function(){  
                if(f_color_array[0] >= s_color_array[0]){  
                    r += division_r;  
                }else if(f_color_array[0] <= s_color_array[0]){  
                    r -= division_r;  
                }  
                if(f_color_array[1] >= s_color_array[1]){  
                    g += division_g;  
                }else if(f_color_array[1] <= s_color_array[1]){  
                    g -= division_g;  
                }  
                if(f_color_array[2] >= s_color_array[2]){  
                    b += division_b;  
                }else if(f_color_array[2] <= s_color_array[2]){  
                    b -= division_b;  
                }  
            }, 30);
  
            //Ez a sor még mindig csak fekete színre fogja változtatni a hátteret.
            element[u].style.background = "rgb(" + r + ", " + g + ", " + b + ")";  
            
if((r >= f_color_array[0]) || (g >= f_color_array[1]) || (b >= f_color_array[2])){  
                window.clearInterval(f_interval);  
            }//temporary statement  
       }  
    for(i = 0; i < element.length; i++){  
        animate(i);  
    }  
}
3

A setInterval hiába futtatja

MadBence · 2015. Szep. 7. (H), 11.53
A setInterval hiába futtatja a megadott függvényt, ha csak egyszer állítod be a hátteret (feketére, mielőtt akár egyszer is meghívódna a setInterval callbackje). Ráadásul a leállási feltétel is rossz helyen van, még az előtt próbálod megállítani a timert (clearInterval), hogy egyszer is lefutott volna.

Egyébként erre minek JS? CSS is tudja ezt: http://codepen.io/lennoff/pen/rOVxwB
4

Hmm.. Köszönöm, nem is tudtam

Mistic97 · 2015. Szep. 7. (H), 21.21
Hmm.. Köszönöm, nem is tudtam a CSS3-as lehetőségről. Érdekes. :)
5

Igen, erre CSS-t érdemes

bamegakapa · 2015. Szep. 7. (H), 23.39
Igen, erre CSS-t érdemes használni.

De ha valami oknál fogva mégis Javascripttel szeretnéd, akkor a setInterval helyett használd a requestAnimationFrame függvényt.
6

Köszönöm! :)

Mistic97 · 2015. Szep. 8. (K), 10.15
Köszönöm! :)