如何在變量設置爲true時清除計時器？

我只是在嘗試一些JS動畫，並且我已經爲一個在邊界內移動的盒子製作了動畫，但是當盒子碰到其中一個邊框時，我希望動畫停止。這是我使用的功能之一：如何在變量設置爲true時清除計時器？

function AnimMoveRight() { 
    var interval = setInterval("moveRight(10)", 40); 
    if (hitRight == true) { 
     clearInterval(interval); 
    } 
}

的moveRight(10)更改爲10個像素的權利的box'position。當盒子碰到右邊框時，hitRight被設置爲真。很明顯，這段代碼不起作用，它只是繼續循環使用moveRight()函數。現在，我的問題是，如何從AnimMoveRight()函數中取消間隔？

來源

2011-04-29 3sdmx

function AnimMoveRight() { 
    var interval; 
    function fnc(){ 
     if (hitRight == true) { 
      window.clearInterval(interval); 
     } 
     else{ 
      moveRight(10); 
     } 
    } 
    interval = setInterval(fnc, 40); 
}

來源

2011-04-29 19:21:10 epascarello

做了這個伎倆，非常感謝！ – 3sdmx 2011-04-29 19:27:18

當'fnc（）'被調用時，'interval'是否需要在函數的外部定義？ – 2011-04-29 19:53:50

如果在移動之前檢查它是否右移，它將只會調用動畫函數（如果它尚未打到右側），我將該函數變爲setTimeout，我認爲這更適合於此任務。

function AnimMoveRight() { 
    if (hitRight !== true) { 
     moveRight(10); 
     setTimeout(AnimMoveRight,40); 
    } 
}

來源

2011-04-29 19:12:36 samccone

但是一旦間隔開始，你什麼時候停止它？一旦開始，它會一直持續下去。 – jolt 2011-04-29 19:16:44

啊你是正確的，對不起我困惑setTimeout與setInterval – samccone 2011-04-29 19:20:03

它在這裏是固定的 – samccone 2011-04-29 19:21:34

一種選擇是獲得完全擺脫的setInterval的，只是調用的setTimeout凡不導致邊界迭代命中：

function AnimMoveRight() { 

    // Do stuff here 

    if (!hitRight) { 
     var nextCall = setTimeout("moveRight(10)", 40); 
    } 
}

來源

2011-04-29 19:19:53

使用setTimeout而不是setInterval更大的控制。
設置定時器時使用函數而不是字符串。
常見約定是用小寫字母開頭函數名稱。
直接檢查truthy/falsy表達式，而不是將它們與布爾值進行比較。

 
    function animMoveRight() { 
     moveRight(10); 

     if (!hitRight) { 
      setTimeout(animMoveRight, 40); 
     } 
    }

來源

2011-04-29 19:19:58

我會說，剛剛轉會clearInterval();出AnimMoveRight();的和hitRight做一個全球性的檢查。而且，如果這是真的，那麼清除間隔。

或者，在全局景象中定義interval變量，並在AnimMoveRight();上設置它。那麼你也可以在AnimMoveRight();之內清除它。還沒有測試過，但我認爲這兩個選項都可以工作。

來源

2011-04-29 19:20:16 jolt

您需要取消moveRight() *以內的間隔。訣竅是讓moveRight()知道intervalId是什麼。你需要公開moveRight()嗎？如果沒有，你可以把它裏面AnimMoveRight：

function AnimMoveRight() { 
    function moveRight(n) { 
     // do stuff 
     if (hitRight) { 
      clearInterval(interval); 
     } 
    } 
    var interval = setInterval(function() { moveRight(10); }, 40); 
}

其他選項，包括通過interval作爲參數傳遞給moveRight：

var interval = setInterval(function() { moveRight(10, interval); }, 40);

還是做了moveRight()調用後右：

var interval = setInterval(function() { 
    moveRight(10); 
    if (hitRight) { 
     clearInterval(interval); 
    } 
}, 40);

*這最後一個實際上取消了間隔f根據你的要求，在AnimMoveRight()之內。

來源

2011-04-29 19:20:49 gilly3

將時間間隔句柄保存爲全局，並在moveRight中檢查是否需要取消，如果需要取消它。

更好的是，使用閉包以便moveRight函數可以進入間隔句柄而不必將其設置爲全局。 var interval = setInterval（function（）{moveRight（10，interval）;}，40）;

來源

2011-04-29 19:23:02 rob

使用此：

function AnimMoveRight() { 
    var interval; 
    function animate() { 
     var hitRight = moveRight(10); 
     if (hitRight) 
     clearInterval(interval); 
    } 
    interval = setInterval(animate, 40); 
}

請注意，您MoveRight的應返回true |假。

來源

2011-04-29 19:28:32

如何在變量設置爲true時清除計時器？

回答

相關問題