JavaScript コールスタックと setTimeout の使用法_JavaScript スキルの詳細な分析

setTimeout は、次のような関数の実行を遅らせるために Javascript でよく使用されます。

コードをコピー コードは次のとおりです。 🎜>

setTimeout(function(){alert("Hello World");},1000);

実行後 1 秒遅れてアラート ウィンドウが表示されます。この文。次に、この段落をもう一度見てください。

コードをコピー コードは次のとおりです。

関数 a (){
setTimeout(function() {alert(1)}, 0);
alert(2)
}


支払いこのコードに注目してください。 setTimeout 遅延が 0 に設定されているため、遅延は 0 ミリ秒、つまり 1、2 ミリ秒間で実行されるように見えます。しかし、実際の実行結果は確かに 2,1 です。なぜ？これは、JavaScript 呼び出しスタックと setTimeout の関数から始まります。

まず、JavaScript はシングルスレッドです。つまり、同時に実行されるコードは 1 つだけであるため、各 JavaScript コード実行ブロックは他の非同期イベントの実行を「ブロック」します。次に、他のプログラミング言語と同様に、JavaScript の関数呼び出しもスタックを通じて実装されます。関数 a を実行するとき、最初に a がスタックにプッシュされます。 setTimeout がalert(1) に追加されていない場合は、次にalert(1)がスタックにプッシュされ、最後にalert(2)がスタックにプッシュされます。しかし、setTimeout をalert(1) に追加した後、alert(1) は新しいスタックに追加され、待機して「できるだけ早く」実行されます。これはできるだけ早く実行するという意味で、a のスタックが完了したらすぐに実行するため、実際の実行結果は最初にalert(2)、次にalert(1)になります。ここで、setTimeout は実際に現在の関数呼び出しスタックからalert(1) を削除します。次の例を見てください:

コードをコピー コードは次のとおりです:

このような関数の目的は、次の文字をすべて削除することです。文字を入力するたびに現在の入力内容が表示されますが、実際の効果はアラートが表示されてボタンが押される前の内容です。ここでは、setTimeout(0) を使用してこれを実現できます。

コードをコピー コードは次のとおりです:

このようにonkeydown イベントがトリガーされ、アラートが次の呼び出しスタックに入れられ、onkeydown イベントによってトリガーされたスタックが閉じられると実行が開始されます。もちろん、ブラウザにはニーズを満たす onkeyup イベントもあります。

このような setTimeout の使用法は、実際のプロジェクトでは依然として頻繁に発生します。たとえば、ブラウザは、DOM を変更する前に関数スタックが終了するまで賢明に待機します。この関数スタックでページの背景が最初に白から赤に設定され、その後白に戻された場合、ブラウザは DOM が変更されていないと判断します。変更され、これを無視するという 2 つの文があるため、setTimeout を通じて「白に戻す」関数を次のスタックに追加できます。これにより、背景色が変更されたことを確認できます (ただし、すぐには気付かない可能性があります)。

つまり、setTimeout は Javascript 関数呼び出しの柔軟性を高め、関数の実行シーケンスをスケジュールするのに非常に便利です。