Comment effacer la minuterie dans ES6

Deux méthodes : 1. Utilisez clearTimeout() pour effacer le minuteur setTimeout, la syntaxe "clearTimeout (valeur de retour du minuteur)" ; 2. clearInterval() pour effacer le minuteur setInterval, la syntaxe "clearInterval (valeur de retour)".

L'environnement d'exploitation de ce tutoriel : système Windows 7, ECMAScript version 6, ordinateur Dell G3.

Deux minuteries dans JS

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

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

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

Définissez une minuterie et définissez un temps d'attente Une fois l'heure atteinte, le La méthode correspondante est exécutée et le temporisateur s'arrête lorsque l'exécution de la méthode est terminée.

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

Définissez une minuterie et définissez un temps d'attente Lorsque l'heure est atteinte, exécutez la méthode correspondante.

Lorsque l'exécution de la méthode est terminée, le minuteur ne s'arrête pas. La méthode correspondante sera réexécutée de temps en temps dans le futur jusqu'à ce que nous effacions manuellement le minuteur.

Remarque : setTimeout() n'exécute le code qu'une seule fois. Si vous souhaitez l'appeler plusieurs fois, utilisez setInterval() ou demandez au code lui-même d'appeler à nouveau setTimeout().

Valeur de retour du minuteur

Le minuteur dans JS a une valeur de retour La valeur de retour est un nombre, qui représente le minuteur actuel.

var timer1=window.setTimeout(function(){},1000);  //timer1->1 当前是第一个定时器
var timer2=window.setTimeout(function(){},1000);  //timer2->2` 当前是第二个定时器
var timer3=window.setTimeout(function(){},1000);   //timer3->3 当前是第三个定时器

Il convient de noter que même si la minuterie est effacée, sa valeur de retour ne sera pas effacée et la valeur de retour de la minuterie définie ultérieurement continuera à refluer en fonction de sa valeur de retour.

Comment effacer la minuterie

Si la minuterie n'est pas effacée à temps, cela peut entraîner un risque de débordement de mémoire. Ainsi, lorsque nous utilisons une minuterie, nous devons envisager de la désactiver au moment opportun.

• Le clear timer a deux fonctions :

• La fonction de destruction de setTimeout est clearTimeout

La fonction de destruction de setInterval est clearInterval

objet setInterval ou setTimeout, ces deux objets timer ne changeront qu'avec L'objet window est pas récupéré de la pile jusqu'à ce qu'il soit détruit. Vous ne pouvez pas demander à la machine de récupération de place de recycler automatiquement en modifiant le pointeur d'une variable pour qu'il pointe vers null. Si vous envisagez de détruire l'objet setInterval dans la mémoire de pile de l'objet fenêtre avant la fermeture de l'objet fenêtre, vous ne pouvez le détruire que via clearInterval

clearTimeout(id_of_settimeout)

Définition : Bloquer/annuler la fonction d'exécution planifiée défini par la méthode setTimeout().

Paramètre : id_of_settimeout est la valeur d'ID renvoyée lors de l'appel de la fonction setTimeout(). L'utilisation de l'identifiant de retour comme paramètre peut annuler l'opération d'exécution planifiée définie par setTimeout().

• Remarque : Pour utiliser la méthode clearTimeout(id_of_setinterval), utilisez des variables globales lors de la création et de l'exécution d'opérations planifiées :

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

Avez-vous besoin de nettoyer setTimeOut à temps

function testTimeout () {
	console.log('1111')
	console.log(setTimeout(testTimeout, 3000));
}

Le code ci-dessus appelle testTimeout de manière récursive, mais setTimeout sera toujours généré par l'objet setTimeout ; bien qu'il soit recyclé par GC, l'heure est incertaine. Ceci est plus dangereux et peut provoquer un débordement de mémoire.

Nous devrions donc appeler clearTimeout avant chaque setTimeout pour empêcher que les objets setTimeout soient créés en continu et non recyclés par GC.

var timeHandle = null;
function testTimeout () {
    if (timeHandle) {
    	// 调用之前，先清理，防止一直生成对象
    	// ps. setInterval 定时器也应该按这种模式处理
    	clearTimeout(timeHandle);
        timeHandle = null;
    }
	console.log('1111');
	console.log(timeHandle = setTimeout(testTimeout, 3000));
}

clearInterval(id_of_setinterval)

Définition : Peut annuler/arrêter l'opération d'exécution planifiée définie par la fonction setInterval().

Paramètre : id_of_setinterval est la valeur d'ID renvoyée lors de l'appel de la fonction setInterval(). Ce n'est qu'en utilisant l'identifiant de retour comme paramètre que l'opération d'exécution planifiée définie par setInterval() peut être annulée.

• Remarque : Pour utiliser la méthode clearInterval(), utilisez des variables globales lors de la création et de l'exécution d'opérations planifiées :

  var myVar = setInterval(function(){ myTimer() }, 1000);
  clearInterval(myVar);

Devez-vous nettoyer setInterval dans le temps

function testInterval () {
	console.log('1111')
	console.log(setInterval(testInterval, 3000));
}

Le code ci-dessus appelle testInterval de manière récursive, mais setInterval générera toujours un objet setInterval ; bien qu'il soit recyclé par GC, le temps est incertain. Ceci est plus dangereux et peut provoquer un débordement de mémoire.

Nous devrions donc appeler clearInterval avant chaque setInterval pour empêcher les objets setInterval d'être créés en continu et non recyclés par GC.

var timeHandle = null;
function testInterval () {
    if (timeHandle) {
    	// 调用之前，先清理，防止一直生成对象
    	clearInterval(timeHandle);
        timeHandle = null;
    }
	console.log('1111');
	console.log(timeHandle = setInterval(testInterval, 3000));
}

Connaissances étendues : utilisez setTimeout pour simuler le comportement de setInterval

Habituellement : utilisez setTimeOut() de manière récursive, l'effet est équivalent à l'utilisation de setInterval()

• Avantages :

• Simplifiez le code

Garantie asynchrone La précision de la séquence d'appels de fonction de la file d'attente et le défaut setInterval entraîneront un désordre dans l'ordre d'exécution des appels de fonction de la file d'attente asynchrone lorsque la quantité de données est importante. Par exemple, avant que l'exécution de cette fonction ne soit terminée, la suivante sera exécutée, mais pas avec récursion, l'entité suivante de la fonction est créée de manière récursive dans l'espace de pile et appelée après l'exécution de la fonction actuelle.

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

【Recommandations associées : tutoriel vidéo javascript

, 🎜front-end web🎜】🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!