Heim > Web-Frontend > Front-End-Fragen und Antworten > So löschen Sie den Timer in es6

So löschen Sie den Timer in es6

青灯夜游
Freigeben: 2022-04-13 16:41:53
Original
7367 Leute haben es durchsucht

Zwei Methoden: 1. Verwenden Sie clearTimeout(), um den setTimeout-Timer zu löschen, die Syntax „clearTimeout (Timer-Rückgabewert)“ 2. clearInterval(), um den setInterval-Timer zu löschen, die Syntax „clearInterval (Rückgabewert)“.

So löschen Sie den Timer in es6

Die Betriebsumgebung dieses Tutorials: Windows 7-System, ECMAScript Version 6, Dell G3-Computer.

Zwei Timer in JS

window.setTimeout([function],[interval])window.setTimeout([function],[interval])

设置一个定时器,并且设定了一个等待的时间,当到达时间后,执行对应的方法,当方法执行完成定时器停止。

window.setInterval([function],[interval])

Stellen Sie einen Timer ein und legen Sie eine Wartezeit fest Die Methode wird ausgeführt und der Timer stoppt, wenn die Methodenausführung abgeschlossen ist.

window.setInterval([function],[interval])

Stellen Sie einen Timer ein und legen Sie eine Wartezeit fest. Wenn die Zeit erreicht ist, führen Sie die entsprechende Methode aus.

Wenn die Methodenausführung abgeschlossen ist, stoppt der Timer nicht. Die entsprechende Methode wird in Zukunft immer wieder neu ausgeführt, bis wir den Timer manuell löschen.

Hinweis: setTimeout() führt Code nur einmal aus. Wenn Sie es mehrmals aufrufen möchten, verwenden Sie setInterval() oder lassen Sie den Code selbst setTimeout() erneut aufrufen.

Timer-Rückgabewert

Der Timer in JS hat einen Rückgabewert, der den aktuellen Timer darstellt.

var timer1=window.setTimeout(function(){},1000);  //timer1->1 当前是第一个定时器
var timer2=window.setTimeout(function(){},1000);  //timer2->2` 当前是第二个定时器
var timer3=window.setTimeout(function(){},1000);   //timer3->3 当前是第三个定时器
Nach dem Login kopieren
Es ist zu beachten, dass selbst wenn der Timer gelöscht wird, sein Rückgabewert nicht gelöscht wird und der Rückgabewert des später eingestellten Timers basierend auf seinem Rückgabewert weiterhin rückwärts fließt.

So löschen Sie den Timer

Wenn der Timer nicht rechtzeitig gelöscht wird, besteht die Gefahr eines Speicherüberlaufs. Wenn wir also einen Timer verwenden, müssen wir darüber nachdenken, ihn zum richtigen Zeitpunkt zu löschen.
  • Der Clear-Timer hat zwei Funktionen:

  • Die Zerstörungsfunktion von setTimeout ist clearTimeout

Die Zerstörungsfunktion von setInterval ist clearInterval

setInterval-Objekt oder setTimeout-Objekt, diese beiden Timer-Objekte ändern sich nur mit Das Fensterobjekt ist wird nicht vom Stapel zurückgefordert, bis das Fensterobjekt zerstört wird. Sie können die Garbage-Collection-Maschine nicht anweisen, automatisch zu recyceln, indem Sie den Zeiger einer Variablen so ändern, dass er auf Null zeigt. Wenn Sie beabsichtigen, das setInterval-Objekt im Stapelspeicher des Fensterobjekts zu zerstören, bevor das Fensterobjekt geschlossen wird, können Sie es nur über „clearInterval“ zerstören die setTimeout()-Methode. Parameter: id_of_settimeout ist der ID-Wert, der beim Aufruf der Funktion setTimeout() zurückgegeben wird. Die Verwendung der Rückgabekennung als Parameter kann den durch setTimeout() festgelegten geplanten Ausführungsvorgang abbrechen.

Hinweis: Um die Methode „clearTimeout(id_of_setinterval)“ zu verwenden, verwenden Sie beim Erstellen und Ausführen geplanter Vorgänge globale Variablen:

var myVar = setTimeout(function(){ alert("Hello"); }, 3000);
clearTimeout(myVar);
Nach dem Login kopieren

Müssen Sie setTimeOut rechtzeitig bereinigen?

  • function testTimeout () {
    	console.log('1111')
    	console.log(setTimeout(testTimeout, 3000));
    }
    Nach dem Login kopieren

    Der obige Code ruft testTimeout rekursiv auf, aber setTimeout wird immer als setTimeout-Objekt generiert. Obwohl es von GC recycelt wird, ist die Zeit unsicher. Dies ist gefährlicher und kann zu einem Speicherüberlauf führen.

  • Deshalb sollten wir vor jedem setTimeout den Aufruf von clearTimeout aufrufen, um zu verhindern, dass setTimeout-Objekte kontinuierlich erstellt und nicht von GC recycelt werden.
var timeHandle = null;
function testTimeout () {
    if (timeHandle) {
    	// 调用之前,先清理,防止一直生成对象
    	// ps. setInterval 定时器也应该按这种模式处理
    	clearTimeout(timeHandle);
        timeHandle = null;
    }
	console.log('1111');
	console.log(timeHandle = setTimeout(testTimeout, 3000));
}
Nach dem Login kopieren

clearInterval(id_of_setinterval)

Definition: Kann den durch die Funktion setInterval() festgelegten geplanten Ausführungsvorgang abbrechen/stoppen. Parameter: id_of_setinterval ist der ID-Wert, der beim Aufruf der Funktion setInterval() zurückgegeben wird. Nur durch die Verwendung der Rückgabekennung als Parameter kann der durch setInterval() festgelegte geplante Ausführungsvorgang abgebrochen werden.

Hinweis: Um die Methode „clearInterval()“ zu verwenden, verwenden Sie beim Erstellen und Ausführen geplanter Vorgänge globale Variablen:

var myVar = setInterval(function(){ myTimer() }, 1000);
clearInterval(myVar);
Nach dem Login kopieren

Müssen Sie setInterval rechtzeitig bereinigen?

  • function testInterval () {
    	console.log('1111')
    	console.log(setInterval(testInterval, 3000));
    }
    Nach dem Login kopieren

    Der obige Code ruft testInterval rekursiv auf, setInterval jedoch generiert immer ein setInterval-Objekt. Obwohl es von GC recycelt wird, ist die Zeit ungewiss. Dies ist gefährlicher und kann zu einem Speicherüberlauf führen.

  • Deshalb sollten wir vor jedem setInterval clearInterval aufrufen, um zu verhindern, dass setInterval-Objekte kontinuierlich erstellt und nicht von GC recycelt werden.
var timeHandle = null;
function testInterval () {
    if (timeHandle) {
    	// 调用之前,先清理,防止一直生成对象
    	clearInterval(timeHandle);
        timeHandle = null;
    }
	console.log('1111');
	console.log(timeHandle = setInterval(testInterval, 3000));
}
Nach dem Login kopieren

Erweitertes Wissen: Verwenden Sie setTimeout, um das Verhalten von setInterval zu simulieren.

Normalerweise: Verwenden Sie setTimeOut() rekursiv. Der Effekt entspricht der Verwendung von setInterval() garantiert asynchron Die Genauigkeit der Funktionsaufrufsequenz der Warteschlange und der setInterval-Defekt führen dazu, dass die Ausführungsreihenfolge der Funktionsaufrufe der asynchronen Warteschlange gestört wird, wenn die Datenmenge groß ist. Bevor beispielsweise die Ausführung dieser Funktion abgeschlossen ist, wird die nächste ausgeführt, jedoch nicht mit Rekursion. Bei der Rekursion wird die nächste Entität der Funktion rekursiv im Stapelbereich erstellt und aufgerufen, nachdem die aktuelle Funktion ausgeführt wurde.

//实现的方法挺简单的 ,如下代码
//参数: 毫秒  需要执行的方法
function console1() {
    console.log(111);
    if(timer){
        clearTimeout(timer);
    }
    timer = setTimeout(function(){
        console1();
    }, 3000);
}
console1()
Nach dem Login kopieren

【Verwandte Empfehlungen:

Javascript-Video-Tutorial

,

Web-Frontend

Das obige ist der detaillierte Inhalt vonSo löschen Sie den Timer in es6. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
es6
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage