Heim > Web-Frontend > js-Tutorial > Hauptteil

JavaScript setTimeout verwendet die Schließungsfunktion, um regelmäßig Werte zu drucken_Javascript-Kenntnisse

WBOY
Freigeben: 2016-05-16 15:24:48
Original
1331 Leute haben es durchsucht

Dieses Mal verwenden wir setTimeout, um ein Beispiel für das sequentielle Drucken von Werten entsprechend der Zeit zu implementieren. Tatsächlich war es in den frühen Tagen auch ein Fehler, den ich oft gemacht habe, oder wie es scheint, diese Fähigkeit zu erreichen js ist weit hergeholt, aber es ist tatsächlich falsch, haha! Ich habe die Leistungsfähigkeit von JS nicht verstanden. Beachten Sie, dass es diesmal sehr einfach sein muss, wenn Sie setInterval verwenden Wir verwenden setTimeout. Beginnen wir mit dem einfachsten Denken. Dann wird der folgende Code geschrieben.

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

Obwohl dieser Code den Wert jedes i nacheinander ausgibt, 0, 1, 2, 3, 4. Die Ausführungszeit spielt jedoch keine Rolle. Warum? Methode, nach dem Aufruf dieser Methode wird sie sofort ausgeführt!, sodass sie unseren erwarteten Zweck nicht erreicht.

Dann schauen wir uns den folgenden Codeabschnitt weiter an

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

Hier verwenden wir eine anonyme Funktion, die das gedruckte console.log enthält, um i auszugeben, sodass der Wert von i geteilt wird. Bevor das erste setTimeout ausgeführt wird, wurde die for-Schleife ausgeführt und das letzte i = 5 Ich werde viermal gedruckt. Tatsächlich haben wir zwei Lösungen. Schauen wir uns zuerst die erste an:

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

Hier haben wir eine weitere globale Variable zum Speichern des Werts. Jedes Mal, wenn die Funktion abc ausgeführt wird, wird j einmal hinzugefügt. Wenn also setTimeout ausgeführt wird, wird die abc-Funktion aufgerufen, sodass der erwartete Effekt erzielt wird, aber hier j ist eine globale Variable. Globale Variablen verursachen Probleme wie die einfache Änderung ihres Werts oder Namenskonflikte. Um die zweite Methode zu implementieren, führen wir die Abschlussfunktion erneut ein seinen eigenen Platz zum Speichern des eindeutigen Werts. Wir schreiben den Code also wie folgt

for(var i = 0; i < 10; i++ )
{ 
(function(x){ setTimeout(function()
{ 
console.log(x) },x*1000) })(i) 
}  
Nach dem Login kopieren
Wir übergeben den Wert von i jedes Mal, wenn die for-Schleife ausgeführt wird, an verschiedene erstellte Abschlussfunktionen, sodass der in jeder Abschlussfunktion gespeicherte Wert von i unterschiedlich ist. So erreichen wir das gewünschte Ergebnis.

ps: Verwenden Sie die Schließung, um setTimeout einfach zu kapseln

Beim Schreiben von JS-Skripten werden häufig einige Rechtschreibfunktionen verwendet, z. B. der Aufruf von setTimeout

var msgalert="test"; 
 function TestAlert(msg) 
   { 
    alert(msg) 
   } 
    
   $(document).ready(function () { 
  $("#btnCancel").click(function (e) { 
    setTimeout("TestAlert("+msgalert+")",1000); 
    }); 
}) 
Nach dem Login kopieren
Ich habe lange gesucht, aber warum das Dialogfeld nicht angezeigt wird. Nachdem ich lange nachgesehen hatte, stellte ich fest, dass ein Paar einfache Anführungszeichen

fehlten.

$(document).ready(function () { 
  $("#btnCancel").click(function (e) { 
    setTimeout("TestAlert('"+msgalert+"')",1000); 
    }); 
}) 
Nach dem Login kopieren
Diese Schreibweise ist fehleranfällig und es ist nicht einfach, Fehler zu erkennen. Wenn Sie Abschlüsse verwenden, können Sie sie wie folgt umschreiben

 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) 
 }); 
Nach dem Login kopieren
Durch die Verwendung von Verschlüssen ist es viel einfacher und auch die Fehlerprüfung ist einfach
Verwandte Etiketten:
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage