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

setInterval() gibt eine Intervall-ID zurück, die Sie an clearInterval() :

var refreshIntervalId = setInterval(fname, 10000);

/* later */
clearInterval(refreshIntervalId);

Siehe die Dokumentationen für setInterval() y clearInterval() .

Answer 2

Wenn Sie den Rückgabewert von setInterval auf eine Variable zu übertragen, können Sie clearInterval um sie zu stoppen.

var myTimer = setInterval(...);
clearInterval(myTimer);

Answer 3

Sie können eine neue Variable setzen und sie bei jedem Durchlauf um ++ (um eins hochzählen) erhöhen, dann verwende ich eine bedingte Anweisung, um sie zu beenden:

var intervalId = null;
var varCounter = 0;
var varName = function(){
     if(varCounter <= 10) {
          varCounter++;
          /* your code goes here */
     } else {
          clearInterval(intervalId);
     }
};

$(document).ready(function(){
     intervalId = setInterval(varName, 10000);
});

Ich hoffe, dass es hilft und dass es richtig ist.

Answer 4

Bereits beantwortet... Aber wenn Sie einen funktionsfähigen, wiederverwendbaren Timer benötigen, der auch mehrere Aufgaben in unterschiedlichen Intervallen unterstützt, können Sie meinen TaskTimer (für Node und Browser).

// Timer with 1000ms (1 second) base interval resolution.
const timer = new TaskTimer(1000);

// Add task(s) based on tick intervals.
timer.add({
    id: 'job1',         // unique id of the task
    tickInterval: 5,    // run every 5 ticks (5 x interval = 5000 ms)
    totalRuns: 10,      // run 10 times only. (omit for unlimited times)
    callback(task) {
        // code to be executed on each run
        console.log(task.name + ' task has run ' + task.currentRuns + ' times.');
        // stop the timer anytime you like
        if (someCondition()) timer.stop();
        // or simply remove this task if you have others
        if (someCondition()) timer.remove(task.id);
    }
});

// Start the timer
timer.start();

In Ihrem Fall, wenn Benutzer klicken, um die Datenaktualisierung zu stören; Sie können auch timer.pause() dann timer.resume() wenn sie wieder aktiviert werden müssen.

参照 mehr hier .

Answer 5

In den obigen Antworten wurde bereits erläutert, wie setInterval ein Handle zurückgibt und wie dieses Handle zum Abbrechen des Intervall-Timers verwendet wird.

Einige architektonische Überlegungen:

Bitte verwenden Sie keine "scope-less" Variablen. Der sicherste Weg ist, das Attribut eines DOM-Objekts zu verwenden. Der einfachste Ort wäre "document". Wenn der Refresher über eine Start/Stop-Schaltfläche gestartet wird, können Sie die Schaltfläche selbst verwenden:

<a onclick="start(this);">Start</a>

<script>
function start(d){
    if (d.interval){
        clearInterval(d.interval);
        d.innerHTML='Start';
    } else {
        d.interval=setInterval(function(){
          //refresh here
        },10000);
        d.innerHTML='Stop';
    }
}
</script>

Da die Funktion innerhalb des Button-Click-Handlers definiert ist, müssen Sie sie nicht erneut definieren. Der Timer kann wieder aufgenommen werden, wenn die Schaltfläche erneut angeklickt wird.