Wie benutze ich clearInterval() richtig?

Question

Ich möchte Tasten verwenden, um die Position eines Objekts kontinuierlich in vier Richtungen (oben, unten, links und rechts) mit einem Klick zu ändern. Wenn ich auf eine Richtungstaste klicke und dann auf die Schaltfläche "Pause" klicke, wird das Objekt nicht mehr bewegt (das funktioniert). Aber wenn ich mehr als einmal auf die Richtungstaste geklickt habe, ohne den "Pause" -Knopf zu drücken, sind alle Bewegungen in diesem Objekt passiert (zB die x-Zeiten von "oben" geklickt, die x-Zeiten der Bewegungsgeschwindigkeit sind), sogar "Pause" -Button gilt , nur eine Bewegung wird aufhören.

Ich weiß zu schätzen, wenn Sie darauf hinweisen können, wo das Problem liegt. dank

<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

Welches Ergebnis erwarten Sie?

Der Grund ist jedes Mal, wenn Sie auf die Schaltfläche klicken, die Variable "change" wurde einem neuen Intervall-ID-Wert zugewiesen, weil ein neues Timeout erstellt wurde (z. B. zwei Schaltflächen vor Pause und zwei Intervalle!) . Wenn Sie auf die Schaltfläche "Pause" klicken, wird nur das Zeitlimit gelöscht, das der letzten ID für die Änderung entspricht.

Wenn Sie nur eine Richtung nach der anderen verschieben möchten, müssen Sie zuerst "clearInterval" auswählen, wenn Sie auf die Schaltfläche zum Verschieben klicken, und dannInterval auf die neue Richtung einstellen.