JavaScript setTimeout はクロージャー関数を使用して値を定期的に出力します_JavaScript スキル

今回は setTimeout を使用して、時間に従って値を順番に出力する例を実装します。実際、これは私が初期によく犯した間違いでもあり、あるいはこの機能を実現するために使用したようです。 js は突飛ですが、実際には私の間違いです (笑)。JS の威力を理解していませんでした。今回は setInterval を使用して実装する場合、非常に簡単であることに注意してください。 setTimeout を使用します。次に、次のコードを記述します。

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

このコードでは、各 i の値 0、1、2、3、4 が順番に出力されますが、実行時間は関係ありません。なぜなら、 console.log() が の実行呼び出しだからです。メソッドを呼び出した後、すぐに実行されるため、期待した目的を達成できません。

それでは、引き続き次のコード部分を見てみましょう

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

ここでは、出力された console.log を含む匿名関数を使用して i を出力します。そのため、最初の setTimeout が実行される前に、for ループが実行され、最後の i = 5 が共有されます。実際には 2 つの解決策があります。まず最初の解決策を見てみましょう:

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

ここでは、abc 関数が実行されるたびに値を格納するグローバル変数が 1 回追加されるため、setTimeout が実行されると abc 関数が呼び出され、期待どおりの効果が得られます。 j はグローバル変数です。グローバル変数は値を変更しやすい、名前が競合するなどの問題が発生します。2 番目の方法を実装するには、クロージャ関数を再度導入します。クロージャ関数が作成されるたびに、独自の値を格納するためのこの考え方を使用して、次のようにコードを記述します。

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

for ループが実行されるたびに、作成されたさまざまなクロージャ関数に i の値を渡します。そのため、各クロージャ関数に格納される i の値は異なります。したがって、必要な結果が得られます。

ps: クロージャを使用して setTimeout を単純にカプセル化します

JS スクリプトを作成する場合、setTimeout の呼び出しなど、いくつかのスペル関数がよく使用されます

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

ダイアログ ボックスが表示されない理由を長い間確認しました。長い間確認した結果、一対の単一引用符

が欠落していることがわかりました。

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

この書き方はエラーが発生しやすいので、クロージャを使えば完全に回避できます。

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

クロージャーを使用しているため、はるかに単純で、エラーチェックも簡単です