JavaScript setTimeout utilise la fonction de fermeture pour imprimer les valeurs régulièrement_javascript skills

Cette fois, nous utilisons setTimeout pour implémenter un exemple d'impression de valeurs​​séquentiellement en fonction du temps. En fait, au début, c'était aussi une erreur que je faisais souvent, ou pour atteindre cette capacité, il semble que. js est tiré par les cheveux, mais c'est en fait mon tort, haha ​​! Je n'ai pas compris la puissance de JS Passons directement au sujet. Notez que si vous utilisez setInterval pour l'implémenter, cela doit être très simple. nous utilisons setTimeout. Commençons par la réflexion la plus simple. Ensuite, il écrira le code suivant.

for(var i = 0; i < 5; i++)
{ 
setTimeout(console.log(i),i*1000); 
} 

Bien que ce code imprime la valeur de chaque i dans l'ordre, 0, 1, 2, 3, 4. Cependant, le temps d'exécution ne joue aucun rôle Pourquoi ? Parce que console.log() est l'appel d'exécution du. méthode , après avoir appelé cette méthode, elle est exécutée immédiatement !, elle n'atteint donc pas notre objectif attendu.

Alors continuons à regarder le morceau de code suivant

for(var i = 0; i< 5; i++ ){ setTimeout(function(){ console.log(i); },i*1000); } 

Ici, nous utilisons une fonction anonyme qui contient le console.log imprimé pour imprimer i, donc la valeur de i est partagée avant l'exécution du premier setTimeout, la boucle for a été exécutée et la finale i = 5 , donc. je serai imprimé quatre fois. En fait, nous avons deux solutions. Regardons d'abord la première :

.

var j = 0; function abc(){ console.log("j = "+j); j++; }  
for(var i = 0; i < 10; i++ ){ 
setTimeout(abc,i*1000) } 

Ici, nous avons une autre variable globale pour stocker la valeur. Chaque fois que la fonction abc est exécutée, j est ajouté une fois, donc lorsque setTimeout est exécuté, la fonction abc sera appelée, donc l'effet attendu sera obtenu, mais ici j est une variable globale, les variables globales causeront des problèmes tels qu'une modification facile de sa valeur ou des conflits de noms. Pour implémenter la deuxième méthode, nous introduisons à nouveau la fonction de fermeture, chaque fois qu'elle est créée. son propre espace pour stocker la valeur unique. Donc, en utilisant cette réflexion, nous écrivons le code comme suit

.

for(var i = 0; i < 10; i++ )
{ 
(function(x){ setTimeout(function()
{ 
console.log(x) },x*1000) })(i) 
}  

Nous transmettons la valeur de i chaque fois que la boucle for est exécutée à différentes fonctions de fermeture créées, de sorte que la valeur de i stockée dans chaque fonction de fermeture soit différente. Nous obtenons donc le résultat souhaité.

ps : utilisez la fermeture pour encapsuler simplement setTimeout

Lors de l'écriture de scripts js, certaines fonctions d'orthographe sont souvent utilisées, comme l'appel de setTimeout

var msgalert="test"; 
 function TestAlert(msg) 
   { 
    alert(msg) 
   } 
    
   $(document).ready(function () { 
  $("#btnCancel").click(function (e) { 
    setTimeout("TestAlert("+msgalert+")",1000); 
    }); 
}) 

Je cherche depuis longtemps, mais pourquoi la boîte de dialogue ne s'affiche pas. Après avoir longuement vérifié, j'ai découvert qu'il manquait une paire de guillemets simples

.

$(document).ready(function () { 
  $("#btnCancel").click(function (e) { 
    setTimeout("TestAlert('"+msgalert+"')",1000); 
    }); 
}) 

Cette façon d'écrire est sujette aux erreurs, et il n'est pas facile de détecter les erreurs si vous utilisez des fermetures, vous pouvez l'éviter complètement comme suit

.

 var msgalert="test"; 
  function dalayAlert(msg ,time){  
  setTimeout( 
  TestAlert(msg), 
  time 
  ); 
  }  
 function TestAlert(msg) 
 { 
  alert(msg) 
 } 
$(document).ready(function () {   
$("#btnCancel").click(function (e) { 
   dalayAlert(msgalert,1000) 
 }); 

Grâce à l'utilisation de fermetures, c'est beaucoup plus simple et la vérification des erreurs est également facile