Wie stoppt man eine „setTimeout'- oder „setInterval'-Schleife in JavaScript?

Stoppen einer setTimeout-Schleife

Im bereitgestellten Code wird eine setTimeout-Schleife verwendet, um die Hintergrundposition eines Bild-Sprites kontinuierlich festzulegen und so zu erstellen eine Ladeanimation. Es muss jedoch gesteuert werden, wann die Schleife gestoppt wird, sobald der Ladevorgang abgeschlossen ist.

Die Lösung besteht darin, das von setTimeout zurückgegebene Timer-Handle zu verwenden. Dieses Handle kann in Verbindung mit clearTimeout verwendet werden, um die Zeitüberschreitung zu stoppen.

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 stop() {
        if (timer) {
            clearTimeout(timer);
            timer = 0;
        }
    }
}

Dieser überarbeitete Code definiert eine Stoppfunktion innerhalb von setBgPosition. Die Stop-Funktion prüft, ob das Timer-Handle vorhanden ist, und löscht es gegebenenfalls mit „clearTimeout“. Der aktualisierte Code kann wie folgt verwendet werden:

var stop = setBgPosition();
// ...later, when you're ready to stop...
stop();

Alternativ kann setInterval anstelle von setTimeout verwendet werden, um eine Wiederholungsschleife zu erstellen. setInterval erfordert jedoch clearInterval, um die Schleife zu stoppen.

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);
}

Dieser Code kann wie folgt verwendet werden:

var timer = setBgPosition();
// ...later, when you're ready to stop...
clearInterval(timer);

Abschließend wird empfohlen, die Verwendung einer Bedingung innerhalb von setBgPosition selbst zur Erkennung in Betracht zu ziehen den Abschluss des Ladevorgangs und stoppt die Schleife automatisch.

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