clearInterval（）を正しく使用する方法は？

Question

ワンクリックでボタンを使ってオブジェクトの4方向（上下左右）の位置を連続的に変更したいと思っています。ある方向ボタンをクリックし、「一時停止」ボタンをクリックすると、オブジェクトは移動を停止します（これは機能します）。しかし、「一時停止」ボタンを使わずに複数の方向ボタンをクリックすると、すべての動きがこのオブジェクト内で発生しました（たとえば、x回の「上」クリック、移動速度のx回）、「一時停止」ボタンが適用されます1つの移動だけが停止します。

問題のある箇所を指摘できれば幸いです。 おかげ

<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

あなたはどのような結果を期待していますか？

理由は、ボタンをクリックするたびに、新しいタイムアウトが作成されたため（「休止前に2つのボタンをクリックして2つの間隔が実行されています」など）、「変更」変数が新しい間隔ID値に再割り当てされました。 。したがって、「一時停止」ボタンをクリックすると、最後の「変更」IDに対応するタイムアウトのみがクリアされます。

ある方向に一方向に移動したい場合は、移動ボタンをクリックすると最初に "clearInterval"し、次に新しい方向にsetIntervalを設定する必要があります。