jsは非同期ループ実装コードを実装します_javascriptスキル

質問
非同期ループを実装するときに問題が発生する可能性があります。

ループのインデックス値をループ内で 1 回出力する非同期メソッドを書いてみましょう。

<script>
for(var i = 0; i < 5; i++){
setTimeout(function(){
document.writeln(i);document.writeln("<br />");
},1000);
}
</script>

上記のプログラムの出力は次のとおりです:

5
5
5
5
5

理由

すべてのタイムアウト (タイムアウト) は、そのコピーではなく、元の i を指します。したがって、for ループは i を 5 にインクリメントし、その後タイムアウトが実行され、i の現在の値 (5) が呼び出されます。

解決策

i をコピーするにはいくつかの異なる方法があります。最も一般的で一般的に使用される方法は、関数を宣言し、この関数に i を渡すことによってクロージャを作成することです。ここでは自己呼び出し関数を使用します。

コードを実行します

<script>
for(var i = 0; i < 5; i++){
(function(num){
setTimeout(function(){
document.writeln(num);document.writeln("<br />");
},1000);
})(i);
}
</script>

出力

0
1
2
3
4