setInterval-Aufruf in JavaScript stoppen

Question

Ich verwende setInterval(fname, 10000); um alle 10 Sekunden eine Funktion in JavaScript aufzurufen. Ist es möglich, den Aufruf bei einem bestimmten Ereignis zu beenden?

Ich möchte, dass der Benutzer die wiederholte Aktualisierung der Daten stoppen kann.

Answer 1

ClearInterval()

Beachten Sie, dass Sie mit dieser Funktion Ihren Code starten und pausieren können. Der Name ist etwas irreführend, denn es heißt CLEAR, aber es wird nichts gelöscht. Sie hält tatsächlich an.

Testen Sie mit diesem Code:

HTML:

<div id='count'>100</div>
<button id='start' onclick='start()'>Start</button>
<button id='stop' onclick='stop()'>Stop</button>

JavaScript:

let count;

function start(){
 count = setInterval(timer,100)  /// HERE WE RUN setInterval()
}

function timer(){
  document.getElementById('count').innerText--;
}

function stop(){
  clearInterval(count)   /// here we PAUSE  setInterval()  with clearInterval() code
}

Answer 2

Utilice clearInterval() für diese.

const intervalId = setInterval(fname, 1000);
clearInterval(intervalId);

Wenn jemand z.B. ein Intervall nach einer bestimmten Bedingung löschen möchte, sollte er dies versuchen.

let i = 0;
function fname() {
    console.log('fname i : ', i++);
    if (i == 3) {
        clearInterval(intervalId);
    }
}
const intervalId = setInterval(fname, 1000);

Answer 3

Verwenden Sie setTimeOut, um das Intervall nach einer bestimmten Zeit zu beenden.

var interVal = setInterval(function(){console.log("Running")  }, 1000);
 setTimeout(function (argument) {
    clearInterval(interVal);
 },10000);

Answer 4

So viele Menschen haben ihre nette Antwort gegeben, clearInterval ist die richtige Lösung.

Aber ich denke, wir können mehr tun, damit unser Editor die beste Praxis mit Javascript-Timern durchsetzt.

Man kann leicht vergessen, die von der setTimeout o setInterval Dies kann zu Fehlern führen, die nicht leicht zu finden sind.

Ich habe also ein Eslint-Plugin für das obige Problem erstellt.

https://github.com/littlee/eslint-plugin-clean-timer

Answer 5

Ich denke, der folgende Code wird Ihnen helfen:

var refreshIntervalId = setInterval(fname, 10000);

clearInterval(refreshIntervalId);

Du hast den Code 100%ig korrekt eingegeben... Also... Wo ist das Problem? Oder ist es ein Tutorial...