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:
  1. function hover(element_class, mouseover, mouseout){  
  2.     var element = document.getElementsByClassName("hover");  
  3.     function animate(u){  
  4.         element[u].onmouseover = function(){  
  5.             var divider = 20;  
  6.             var f_color_array = mouseover.split(" ");  
  7.             var s_color_array = mouseout.split(" ");  
  8.             var division_r = f_color_array[0]/divider;  
  9.             var division_g = f_color_array[1]/divider;  
  10.             var division_b = f_color_array[2]/divider;  
  11.             var r = 0;  
  12.             var g = 0;  
  13.             var b = 0;            
  14.             /*function color(){ 
  15.                 if(f_color_array[0] >= s_color_array[0]){ 
  16.                     r += division_r; 
  17.                 }else if(f_color_array[0] <= s_color_array[0]){ 
  18.                     r -= division_r; 
  19.                 } 
  20.                 if(f_color_array[1] >= s_color_array[1]){ 
  21.                     g += division_g; 
  22.                 }else if(f_color_array[1] <= s_color_array[1]){ 
  23.                     g -= division_g; 
  24.                 } 
  25.                 if(f_color_array[2] >= s_color_array[2]){ 
  26.                     b += division_b; 
  27.                 }else if(f_color_array[2] <= s_color_array[2]){ 
  28.                     b -= division_b; 
  29.                 } 
  30.                 //console.log(r); 
  31.             }*/  
  32.             var f_interval = setInterval(function(){  
  33.                 if(f_color_array[0] >= s_color_array[0]){  
  34.                     r += division_r;  
  35.                 }else if(f_color_array[0] <= s_color_array[0]){  
  36.                     r -= division_r;  
  37.                 }  
  38.                 if(f_color_array[1] >= s_color_array[1]){  
  39.                     g += division_g;  
  40.                 }else if(f_color_array[1] <= s_color_array[1]){  
  41.                     g -= division_g;  
  42.                 }  
  43.                 if(f_color_array[2] >= s_color_array[2]){  
  44.                     b += division_b;  
  45.                 }else if(f_color_array[2] <= s_color_array[2]){  
  46.                     b -= division_b;  
  47.                 }  
  48.             }, 30);  
  49.             element[u].style.background = "rgb(" + r + ", " + g + ", " + b + ")";  
  50.             if((r >= f_color_array[0]) || (g >= f_color_array[1]) || (b >= f_color_array[2])){  
  51.                 window.clearInterval(f_interval);  
  52.             }//temporary statement  
  53.         };  
  54.         element[u].onmouseout = function(){  
  55.             element[u].style.background = "#D43F3F";  
  56.         };  
  57.     }  
  58.     for(i = 0; i < element.length; i++){  
  59.         animate(i);  
  60.     }  
  61. }  
‹ 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.
  1.             var r = 0;    
  2.             var g = 0;    
  3.             var b = 0;              
  4.             var f_interval = setInterval(function(){    
  5.                 if(f_color_array[0] >= s_color_array[0]){    
  6.                     r += division_r;    
  7.                 }else if(f_color_array[0] <= s_color_array[0]){    
  8.                     r -= division_r;    
  9.                 }    
  10.                 if(f_color_array[1] >= s_color_array[1]){    
  11.                     g += division_g;    
  12.                 }else if(f_color_array[1] <= s_color_array[1]){    
  13.                     g -= division_g;    
  14.                 }    
  15.                 if(f_color_array[2] >= s_color_array[2]){    
  16.                     b += division_b;    
  17.                 }else if(f_color_array[2] <= s_color_array[2]){    
  18.                     b -= division_b;    
  19.                 }    
  20.             }, 30);  
  21.     
  22.             //Ez a sor még mindig csak fekete színre fogja változtatni a hátteret.  
  23.             element[u].style.background = "rgb(" + r + ", " + g + ", " + b + ")";    
  24.               
  25. if((r >= f_color_array[0]) || (g >= f_color_array[1]) || (b >= f_color_array[2])){    
  26.                 window.clearInterval(f_interval);    
  27.             }//temporary statement    
  28.        }    
  29.     for(i = 0; i < element.length; i++){    
  30.         animate(i);    
  31.     }    
  32. }   
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! :)