如何正確使用clearInterval（）？

Question

我想用按鈕在四個方向（上，下，左，右）上連續地改變一個物體的位置。當我點擊一個方向按鈕，然後點擊'暫停'按鈕，對象將停止移動（這是有效的）。但是當我點擊不止一次方向按鈕而沒有給出「暫停」按鈕時，所有移動都發生在這個對象上（例如點擊'上'的x次，移動速度的x倍），甚至'暫停'按鈕，只有一個動作會停止。

我很感謝你能否指出問題所在。 感謝

<script> 
var pause=false; 
var change; 
function move(event) { 
    pause=false; 
    console.log('start') 

    var objId=event.id; 
    var objStyle=document.getElementById('object'); 

    change=setInterval(function() { 
      if (objId==='up'){ 
       objStyle.style.top=parseInt(objStyle.style.top)-10+'px'; 
      } 
      else if (objId==='down'){ 
       objStyle.style.top=parseInt(objStyle.style.top)+10+'px'; 
       console.log('down') 
      } 
      else if (objId==='left'){ 
       objStyle.style.left=parseInt(objStyle.style.left)-10+'px'; 
      } 
      else if (objId==='right'){ 
       objStyle.style.left=parseInt(objStyle.style.left)+10+'px'; 
       console.log('right') 
      } 



    },100) 


} 

function Pause() { 
    clearInterval(change) 
} 

Answer 1

你期待什麼結果呢？

原因是每次單擊該按鈕時，由於創建了新的超時值，因此「更改」變量重新分配給新的間隔ID值（例如，在暫停和兩個間隔運行前單擊兩個按鈕！） 。所以當你點擊「暫停」按鈕時，只有對應於最後一次「更改」ID的超時纔會被清除。

如果您只想一次移動一個方向，則當您單擊移動按鈕時，需要首先「clearInterval」，然後將setInterval設置爲新方向。