あなたは秘密を知っている必要がありますのsetTimeout

タイマーは、setTimeout指定されたミリ秒数後に関数を呼び出したり、式を評価するために使用され、私たちはしばしば使用されています。

構文：setTimeout(code, millisec, args);

注：コードは、実行に文字列相当する場合eval()、コードを実行する方法。

もちろん、この記事では、どれだけ使用する方法を教えてくれませんsetTimeoutが、また、それがどのように実行されるかを理解すること。

1、のsetTimeout原則

コードの一部を初めて目：

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

上記のコードでは、の定義setTimeoutタイマーは、遅延時間は500ミリ秒です。

500：あなたは、印刷結果があると思いませんか

しかし、実際には、あなたの期待を超えて、結果を印刷することは（おそらくあなたは、プリントアウト異なるだろうが、それは確かに1000ミリ秒より大きくなります）これです：
setTimeout

これはウールのためにありますか？JavaScriptがシングルスレッドの実行があるためです。これは、任意の時点で、1と同時にマルチセグメントのコードを実行することはできませんJavaScriptプログラムを実行している唯一のスレッドがあります。

お使いのブラウザはJavaScriptに見てみましょう。

GUIは、トリガーのスレッドにスレッド、ブラウザのイベントをレンダリング、JavaScriptエンジンのスレッド：ブラウザカーネルは、少なくとも三つの永久的なスレッドを達成するために、ブラウザ、ペースを維持するためには、カーネルの制御下で協力した、マルチスレッド化されています。

JavaScript引擎イベント駆動型シングルスレッドの実行に基づいており、JavaScriptエンジンは、ミッションのタスクキューの到着を待っているとどのようなブラウザのJavaScriptの一つのスレッドだけ実行されているJavaScriptプログラムを関係なく、対処されます。
GUI渲染线程インタフェースが再描画される（リペイント）を必要とするときに、ブラウザ・インタフェースをレンダリングするためのまたはいくつかの操作を担当するリフロー（リフロー）スレッドが実行される発生させたとき。JavaScriptエンジンは、GUIスレッドが、GUIの更新がキュー内のJavaScriptエンジンのアイドル時まで実行され、すぐに保存されている中断され実行したときに注意、しかし、GUIのレンダリングとJavaScriptエンジンは、スレッド相互に排他的です。
事件触发线程イベントがトリガされると、スレッドは、JavaScriptエンジンで処理されるのを待って、待ち行列の最後を処理するイベントを追加します。これらのイベントは、などマウスクリック、Ajaxの非同期要求、としてではなく、なぜなら、これらのイベントのすべてのJavaScriptエンジンを処理するためにキューに入れられていたシングルスレッドのJavaScriptとの関係では、そのような現在実行中のコードのsetTimeoutメソッドのJavaScriptエンジンブロックなど、他のスレッドから、だけでなく、ブラウザのカーネルから来ることができます（スレッドの前提は、任意の同期符号は、非同期コードを実行する実行しない場合）。

ここでは、私たちが最初の例を見てみましょう：

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

が、setTimeout遅延時間がのために500ミリ秒、しかしであるwhile循環はJavaScriptのスレッドを占有している間に間隔が1000ミリ秒以上である場合にのみ、循環の存在、whileループの外にジャンプしますが、それは、1000ミリ秒前です。、のみしばらく飛び出すのを待っていることを、スレッドは以前に定義されたsetTimeoutを実行するために、ダウンアイドルます。

最後に、我々はそれを結論付けることができ、setTimeoutそれが唯一のタスクキューに挿入された指定されたタスク（実行される機能）後の待ち時間を保証することはできますが、どのような時には、タスクの実行を保証するものではありません。アイドルスレッドの実行が出たJavaScriptたら、タスクはキューから削除され、実行してみてください。

あなたはすぐにタスクキューキューを削除し、それを実行することができるようにjavascriptのスレッドが、理由の操作を消費するかのブロックされていないので、そのようなキューイングメカニズムで、私たちの非同期実行の錯覚を与えました。

2、良いパートナーのsetTimeout "0"

おそらく、あなたは以下のコードのこの部分を見てきました：

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

上記のコードは直ちに示します。主張実行時間が少なく、指定した時間よりもときに、ブラウザはsetTimeoutメソッドとして許容される最小時間を使用しますが、すぐに関数を呼び出しますが、setTimeoutを最小実行時間があるので、実際には、上記のコードは、すぐに実行されていません我々は入れても、setTimeoutを遅延時間が0に設定されていることを意味する時間間隔は、と呼ばれるプログラムがすぐに開始されませんでした。

異なるブラウザ別の状況は、IE8 IEおよびそれ以前の時間精度は15.6msです。しかし、HTML5、ブラウザ（クローム、IE9 +、等）の高度なバージョンの出現により、最小時間間隔は、以下、この値よりは、それが自動的に増加する場合、4ミリ秒以上で定義され、そして2010年以降にされ協調ブラウザをリリースしました。

私たちが書くときに、あるsetTimeout(fn,0)それはすべてのブラウザに依存してどのように迅速にコールバック「できるだけ早く」キューをジャンプするための時間は、実際に運用要件ブラウザを達成するため、実際の。

そして、setTimeout(fn, 0)それは何を使用ですか？実際には、有用性は、我々は、タスクの実行順序を変更することができるということです！ブラウザの意志タスクがキューに現在のタスクの実行を終了しているため、タスクがキューに蓄積されたsetTimeout行います。

0に遅延を設定することで実行されるタスクは、タスクの実行、タスクの遅延が発生するの順序を変更するので、非同期実行ことができます。

非常に人気のあるオンラインの例を見てください：

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

`例：例

あなたは二つの形式にコンテンツを入力すると、あなただけの内容前への入力になりますのsetTimeout関数を使用すると、使用setTimeout関数が入るようになるだろうではないでしょう。

これはなぜでしょうか？

ボタンが押されたときにイベントハンドラが実行されたときに、JavaScriptエンジンは、KeyDownイベントのイベントハンドラを実行する必要がある、[値のテキストボックスの値を更新し、オーダーで必要とされるこれら二つのタスクので、更新値の値（キープレスで後）の使命は、我々のKeyDownイベントハンドラが更新された値、および使用のsetTimeout（FN、0）には使用できませんので、我々は更新された値の値で、キューに操作の値をとり、キューを入力することです後で、あなたは、テキストボックスの値を取得することができます。

setTimeout関数を使用しない場合、実行順序は次のとおりです。 `にonKeyDown =>れるonkeypress => onkeyupの

使用setTimeout函数，执行顺序是：onkeydownを=>れるonkeypress =>機能=> onkeyup`

我々は使用することができますがkeyup代わりにkeydown、いくつかの問題がある、それは長い時間であり、keyupそしてトリガされません。

長い時間、KeyDownイベント、キーの押下、keyUpイベントシーケンスを呼び出します：

keydown
keypress
keydown
keypress
...
keyup

あなたはkeyUpイベントでリアルタイム値を取得することはできませんので、それからkeyupは一度だけ誘発します。

また、使用することができますsetImmediate()代わりにsetTimeout(fn,0)：

if (!window.setImmediate) {  
    window.setImmediate = function(func, args){  
      return window.setTimeout(func, 0, args);  
   };  
  window.clearImmediate = window.clearTimeout;
 }

setImmediate（ブラウザが他の文の後ろに終了した後 `メソッドは、コールバック関数の中で長時間実行の一部を動作させるために使用される）、すぐにコールバック関数を実行し、必須の最初の引数funcが、それはだろうと述べ実行するコールバック関数は、時間パラメータを必要としません。

注：現時点では、唯一のIE10サポートこの方法は、当然のことながら、Nodejsにも、このメソッドを呼び出すことができます。

3、いくつかの秘密のsetTimeout

この3.1のsetTimeoutコールバック関数

ためのsetTimeout（）メソッドは、変数のスコープに関連するウィンドウオブジェクトを指し、ブラウザウィンドウオブジェクトによって提供されるので、この事実の関数の最初のパラメータです。

例を見てください：

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

しかし、我々は、このバインド（）メソッドを使用してsetTimeoutメソッドのコールバック関数を変更することができます

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

関連記事：JSの呼び出しで、適用、バインド方法

3.2つ以上のパラメータをsetTimeoutを

私たちはすべて省略された場合のsetTimeoutの最初のパラメータは、実行するコールバック関数で、2番目のパラメータは遅延時間であることを知っているが（IE、FireFoxの、大きなで初めて可能にブラウザによって自動的に設定されますデジタル、垂直100msのは、次の時間間隔が最小に低減され、サファリ、クロム、オペラ10msのはほとんど垂直です。）

実際には、setTimeoutを3番目の引数は、Shenmaそれを表現する四番目のパラメータを渡すことができます....？実際に、パラメータを渡す最初のパラメータ（コールバック関数）を示すために使用されます。

setTimeout(function(a, b){  
console.log(a); // 3 
console.log(b); // 4},0, 3, 4);

オリジナルリンク：何をすることがわかっているのsetTimeout秘密

あなたが質問や提案がある場合は、下記のコメント欄にコメントをしてください！

1、のsetTimeout原則

2、良いパートナーのsetTimeout "0"

3、いくつかの秘密のsetTimeout

おすすめ