ugrás a tartalomhoz

Javascript, setIntervallal bejegyzet fv futása nem áll le a clearIntervalra

fchris82 · 2008. Aug. 10. (V), 17.48
Már órák óta vacakolok egy scripttel és nem értem, hol a hiba. Van két div-em. Az #inner nagyobb, mint az #outer. Abban kéne mozgatni az #inner-t, az egér pozíciójától függően. Ha az egér 30px-nél jobban megközelíti az #outer szélét, akkor a megfelelő irányba tologatja az #inner-t, amíg az egér ismét el nem távolodik 30px-nél jobban a széltől.

CSS:
  1. #outer {  
  2.  width: 600px;  
  3.  height: 400px;  
  4.  overflow: hidden;  
  5.  position: absolute;  
  6. }  
  7.   
  8. #inner {  
  9.  position: absolute;  
  10. }  
HTML:
  1. <div id="outer" onMouseMove="mouseMoveHandler">  
  2.   <div id="inner">  
  3.     Vmi tartalom....  
  4.   </div>  
  5. </div>  
JS:
  1. var moveInterval = 0;  
  2.   
  3. function mouseMoveHandler(e) {  
  4.     container = document.getElementById('outer');  
  5.     mX        = getElementMouseX(container, e);  
  6.     mY        = getElementMouseY(container, e);  
  7.   
  8.     document.test.n.value = mX;  
  9.     document.test.m.value = mY;  
  10.   
  11.     /* A */  
  12.     if(mX<30 || mY<30)  
  13.     {  
  14.       moveX = (mX<30) ? 30-mX : 0;  
  15.       moveY = (mY<30) ? 30-mY : 0;  
  16.       moveInterval = window.setInterval(moveInner, 100, moveX, moveY);  
  17.       /* B */  
  18.     } else {  
  19.       /* C */  
  20.     }  
  21. }  
  22.   
  23. function moveInner(intervalX, intervalY) {  
  24.     var inner = document.getElementById('inner');  
  25.     inner.style.left = inner.offsetLeft+intervalX+'px';  
  26.     inner.style.top  = inner.offsetTop+intervalY+'px';  
  27.     window.clearInterval(moveInterval);  /* D */  
  28. }  
Nos, ha a clearInterval (D komment) sor nem a B helyen van, akkor az "úsztatás" végtelen ciklusba kerül, és az #inner "elúszik". Ha a B helyen van, akkor meg meg se moccan. Amint látható, mindenfélét megpróbáltam már kiiratni, hogy megtaláljam a hibát, de nem megy :-/ Miért nem áll le az úsztatás, ha az egér ismét eltávolodik a széltől?

Kiegészítés, teszteléshez, ami az átláthatóság miatt az előzőkből kimaradt:
  1. function getElementMouseX(obj, e)  
  2.   {  
  3.     var xcoord = (typeof(e.pageX)=='number') ? e.pageX : e.clientX+document.body.scrollLeft;  
  4.     xcoord = xcoord - getElementX(obj);  
  5.     return xcoord;  
  6.   }  
  7.   
  8.   function getElementMouseY(obj, e)  
  9.   {  
  10.     var ycoord = (typeof(e.pageY)=='number') ? e.pageY : e.clientY+document.body.scrollTop;  
  11.     ycoord = ycoord - getElementY(obj);  
  12.     return ycoord;  
  13.   }  
‹ Objektum végén a "();" mit jelent? Nem működik az onmouseover ajax-nál! ›
 ■
1

Kimaradt

fchris82 · 2008. Aug. 10. (V), 17.52
  1. function getElementY(obj)  
  2. {  
  3.   top = 0;  
  4.   if (obj.offsetParent) {  
  5.       do {  
  6.     top += obj.offsetTop;  
  7.     } while (obj = obj.offsetParent);  
  8.   }  
  9.   
  10.  return top;  
  11. }  
  12.   
  13. function getElementX(obj)  
  14. {  
  15.   left = 0;  
  16.   if (obj.offsetParent) {  
  17.       do {  
  18.     left += obj.offsetLeft;  
  19.     } while (obj = obj.offsetParent);  
  20.   }  
  21.   
  22.  return left;  
  23. }  
2

Szerintem a 'var' a gond.

Velias9 · 2008. Aug. 11. (H), 16.21
Nem vagyok benne 100%-osan biztos, de ha így:
  1. var moveInterval = 0;  
hozod létre a 'moveInterval' változót, akkor nem fog illeszkedni a 'window' objektumhoz és nem lesz elérhető a függvényeken belül.
Lehet, hogy segíteni fog, ha a 16. sort átírod így:
  1. window.moveInterval = window.setInterval(moveInner, 100, moveX, moveY);  
, persze csak akkor, ha az első sort átírtad.
Nem biztos, hogy működik, de érdemes megpróbálni.
Egy jótanács: használj kisbetűs eseménykezelőneveket, mert ez a szabványos és néhány esetben nem működik ez a módszer.

Remélem segítettem.