setTimeout 学習の概要

この記事では、setTimeout の原理、setTimeout(function(){..},0); の意味と setTimeout のパラメータの問題を主に紹介します。とても良い参考値です

概要紹介

今日ある記事を読んで、よく書かれていると思ったので、私なりに理解して勉強してみました。概要

原文：知っておくべきsetTimeoutの秘密

主な内容：

1. setTimeoutの原理

2. setTimeout(function(){.. },0)

3. setTimeout の this ポインターとパラメーターの問題

setTimeout の原理

まずコードの一部を見てみましょう:

var start = new Date();
 setTimeout(function(){
  console.log(new Date() - start);
 },500);
 while(new Date() - start <= 1000 ){}

出力は 1003 (数値は異なる場合がありますが、すべて 1000 より大きいです)

このような数値が出力される理由は、setTimeout が実行されるとコードが 500ms 後に実行キューに入れられるためです。ただし、while ループが実行され、while ループは 1000 ミリ秒を占有します。この 1000 ミリ秒の間、キュー内のすべてのタスクは while ループが終了するまで待機する必要があります。指定された時間後にタスクをキューに追加し、CPU が実行をスケジュールするのを待ちます。タスクがいつ実行されるかは保証されません

時々次のようなコードを見たことがあります:

 setTimeout(function(){
  //...........
 },0);

前回の学習の後、コードがsetTimeoutに実行されると、タスクはすぐに実行キューに追加されると思いました。実際にはそうではありませんが、指定された遅延実行時間は 0 ですが、setTimeout には独自の最小遅延時間 (ブラウザによって異なります) があるため、0 が書き込まれた場合でも、setTimeout は最小遅延時間の後にタスクを追加します。実行キューで

を 0 に設定する目的は、タスクの実行順序を変更することです。ブラウザは現在のタスク キュー内のタスクの実行を終了し、その後 setTimeout キューに蓄積されたタスクを実行するため、次のような問題が発生します。

setTimeoutのこのポインタとパラメータの問題

setTimeoutのコールバック関数のこのポイントはウィンドウを指します

例:

window.onload = function(){
 document.querySelector('#one input').onkeydown = function(){
  document.querySelector('#one span').innerHTML = this.value;
 };
 document.querySelector('#two input').onkeydown = function(){
  setTimeout(function(){
  document.querySelector('#two span').innerHTML = document.querySelector('#two input').value;
  },0)
 }
 }

setTimeoutには通常2つのパラメータがありますが、複数のパラメータを持つこともできます

var a = 1;
 var obj = {
  a : 2,
  output : function(){
  setTimeout(function(){
   console.log(a);
  },0);
  }
 }
 obj.output(); //1