Wie kann ich eine „setTimeout'- oder „setInterval'-Schleife in JavaScript stoppen?

Stoppen einer setTimeout-Schleife

Beim Erstellen eines Ladeindikators mithilfe eines Sprites besteht ein üblicher Ansatz darin, eine Funktion zu verwenden, um die Hintergrundposition festzulegen der Indikator. Um eine Endlosschleife zu erstellen, ruft der Code die Funktion rekursiv innerhalb eines setTimeout-Rückrufs auf. Es kann jedoch vorkommen, dass Sie diese Schleife nach Abschluss einer bestimmten Aktion anhalten müssen.

Eine Lösung besteht darin, das von setTimeout zurückgegebene Timer-Handle abzurufen und es mit clearTimeout zu verwenden, um die Schleife zu beenden. Hier ist eine modifizierte Version des Codes, der diesen Ansatz implementiert:

function setBgPosition() {
  var c = 0, timer = 0;
  var numbers = [0, -120, -240, -360, -480, -600, -720];

  function run() {
    Ext.get('common-spinner').setStyle('background-position', numbers[c++] + 'px 0px');
    if (c >= numbers.length) {
      c = 0;
    }
    timer = setTimeout(run, 200);
  }

  timer = setTimeout(run, 200);
  
  return stop;  // Function to stop the loop

  function stop() {
    if (timer) {
      clearTimeout(timer);
      timer = 0;
    }
  }
}

Um diesen Code zu verwenden, können Sie setBgPosition() aufrufen und die zurückgegebene Funktion (Stopp) in einer Variablen speichern:

var stop = setBgPosition();

Wenn Sie die Schleife stoppen müssen, rufen Sie einfach die Stoppfunktion auf:

stop();

Alternativ können Sie stattdessen setInterval verwenden setTimeout. setInterval wiederholt die angegebene Funktion automatisch in einem bestimmten Intervall. Hier ist ein Beispiel mit setInterval:

function setBgPosition() {
  var c = 0;
  var numbers = [0, -120, -240, -360, -480, -600, -720];

  function run() {
    Ext.get('common-spinner').setStyle('background-position', numbers[c++] + 'px 0px');
    if (c >= numbers.length) {
      c = 0;
    }
  }
  
  return setInterval(run, 200);
}

In diesem Szenario stoppt der folgende Code die Schleife:

var timer = setBgPosition();
clearInterval(timer);

Das obige ist der detaillierte Inhalt vonWie kann ich eine „setTimeout'- oder „setInterval'-Schleife in JavaScript stoppen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!