setTimeout メソッドは、指定されたミリ秒数の後に関数または計算式を呼び出すために使用されます。この記事ではsetTimeoutからのjs関数の実行処理を中心に紹介しますので、必要な方は参考にしていただければ幸いです。
何?これは昔見た、「5」を印刷し、次に「5」を印刷し、5 が 6 枚印刷されるまで毎秒 5 を印刷するという実装方法ではないでしょうか。ここで疑問が生じます。0、1、2、3、4、5 を順番に出力したい場合はどうすればよいでしょうか。実際、これまでに 2 つの方法があることはわかっていました。1 つは次のようなものです:
for (var i = 0; i < 5; i++) { setTimeout(function () { console.log(i) }, i * 1000); } console.log(i);
もう 1 つは次のようなものです:
function log(i){ setTimeout(function(){ console.log(i) },i*1000) }; for (var i = 0; i < 5; i++) { log(i) ; } console.log(i);
冗談を恐れないでください。これまでは、これら 2 つの関数が実際に何に使われるのか理解していませんでした。 、でも今はそうではありません、私は強迫性障害です!そこで、ゆっくり分析してみたところ、上記のコードは、条件が満たされた場合、
for(var i=0;i<5;i++){ (function(e){ setTimeout(function(){ console.log(e) },i*1000); })(i); }; console.log(i);
i=1 の場合、
setTimeout(function(){ console.log(i) },0*1000);
i =2 の場合;
setTimeout(function(){ console.log(i) },1*1000);
rreee の場合
マイクロタスクには、process.nextTick、Promises、Object.observe、MutationObserverが含まれます
上記関数のsetTimeoutはマクロタスクです
jsでは、イベントループの順序はスクリプトから始まる最初のループです。次にグローバルコンテキスト 関数呼び出しスタックに入り、マクロタスクに遭遇した場合、それを処理するモジュールに渡します。マイクロタスクに遭遇した場合、コールバック関数をマクロタスクキューに入れます。コールバック関数をキュー内のマイクロタスクに入れます。関数呼び出しスタックがクリアされ、グローバル実行コンテキストのみが残るまで、すべてのマイクロタスクが実行され始めます。 すべての実行可能なマイクロタスクが実行された後。ループはマクロタスク内のタスクキューを再度実行し、実行後にすべてのマイクロタスクを実行し、このようにループが続きます。
setTimeout(function(){ console.log(i) },2*1000);
説明してください =>
1 まず、スクリプト タスク ソースが実行され、グローバル コンテキストがスタックにプッシュされます。
2. スクリプト タスクのソース コードが実行中に setTimeout に遭遇すると、マクロタスクとして、そのコールバック関数が独自のキューに入れられます。
3. スクリプトタスクソースのコードは、実行中に Promise インスタンスに遭遇します。 Promise コンストラクターの最初のパラメーターは、現在のタスクが直接実行される場合はキューに入れられないため、この時点では 1 が出力されます。
4. forループ内でresolve関数に遭遇すると、関数はスタックにプッシュされてからポップアウトされます。このとき、PromiseのステータスはFulfilledになります。次に、コードが実行され、console.log(2) が検出され、2 が出力されます。
5. 次に実行すると、コードは then メソッドに遭遇し、そのコールバック関数がマイクロタスクとしてスタックにプッシュされ、Promise のタスクキューに入ります。このとき、Promise の then の関数コールバック関数も同様です。つまり、関数コンテキスト、つまりスクリプト内のすべての非キュー コードが実行され、マイクロタスク キューが処理されるまで、それらはそれぞれのタスク キューに配置されます。マクロタスク キューの前に、
console.log('golb1'); setTimeout(function() { console.log('timeout1'); new Promise(function(resolve) { console.log('timeout1_promise'); resolve(); setTimeout(function(){ console.log('time_timeout') }); }).then(function() { console.log('timeout1_then') }) setTimeout(function() { console.log('timeout1_timeout1'); }); }) new Promise(function(resolve) { console.log('glob1_promise'); resolve(); setTimeout(function(){ console.log('prp_timeout') }); }).then(function() { console.log('glob1_then') })
如果你的执行结果是:golb1=>glob1_promise=>glob1_then=>timeout1=>timeout1_promise=>timeout1_then=>prp_timeout=>time_timeout=>timeout1_timeout1,
可能异步队列算是入门了吧!~~上面的代码看起来有点杂乱,可能用asyns搭配await改造一下会更好,但是这或多或少是鄙人从setTimeout中得到的见解吧
相关推荐:
JavaScript如何使用setTimeout来实现轮循动画的实例详解
以上がjs関数の実行プロセスを確認するためのsetTimeoutを説明する例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。