タイマーを作成するのsetTimeout（）としたsetInterval（）を使用面白いと便利な機能を達成するために使用することができます。ページのライフサイクルは、プロセス制御、JavaScriptで異なる時間に他のコードがあるかもしれませんので、実行タイミングは、保証されません。、イベントハンドラを実行されるコードをダウンロードした後のページでは、Ajaxのコールバック関数は、同じスレッドを使用して実行する必要があります。実際には、ブラウザは、ある時点で実行するコードの優先順位ピースを割り当てる、発注する責任があります。シングルスレッドのjsをクリックしてくださいがあります。
ブラウザのマルチプロセス
JavaScriptが実行されているタイムラインを想像することができます。ページがロードされると、最初の<script>要素、通常はいくつかの単純な機能と、使用するライフサイクルの裏ページで宣言された変数の任意のコードの実行、しかし、時々、いくつかの初期データを扱っています。その後、JavaScriptのメインスレッドは、より多くのコードの実行を待ちます。あなたがボタンをクリックすると、たとえば、のonclickイベントハンドラは限りメインのJavaScriptスレッドは自由であるとして、直ちに実行されます。図中のページに似たようなタイムライン。
メインのJavaScriptスレッドに加えて、プロセスのコードの実行キュー内のアイドル時間が必要です。そのライフサイクルのページが進むと、コードが実行順序に従ってキューに追加されます。ボタンが押されたときに、例えば、そのイベントハンドラのコードは、キューに追加し、可能な次の時間を実行します。レスポンスAjaxコードのコールバック関数を受信すると、キューに追加されます。コードはすぐにJavaScriptで実行されていないが、メインスレッドがアイドル状態になった後は、できるだけ早く実行されませ。
キューが動作タイマーは、特定のコードの後に最後の時間が挿入されたときにということです。それはすぐに実行されますが、唯一のそれは、できるだけ早く実行されることが示されたことをキューに追加されたコードを意味しないことに注意してください。150msの実行にタイマー150msのを設定した後、コードがすぐに実行されていることを意味するものではありません、それはコードが150msの後にキューに追加されると述べました。この時点で場合は、キュー内の他の何も、このコードは、コードは、時間に正確に指定したポイントで実行されているかのように見える表面には、実行されません。他の例では、コードが大幅に実行するために長く待つことがあります。
次のコードを考えてみます。
VaRのBTN =のdocument.getElementById（ "私の-BTN"）;
btn.onclick =関数（）{
setTimeout（関数（）{
document.getElementById（ "メッセージ"）style.visibility = "可視"。
}、250）。
//他のコード
}。
イベントハンドラを設定するには、ここでボタンを押します。250ミリ秒後に呼び出さタイマーイベントハンドラを設定します。ボタンをクリックした後、最初のonclickイベントハンドラはキューに参加します。さらに250ミリ秒後に、タイマーを設定した後に実行されるプログラムは、特定のコードが実行のみのためにキューに追加されました。実際には、のsetTimeout（）への呼び出しが遅く、いくつかのコードを実行されると言われています。
覚えておくべき最も重要なことは、タイマーであり、キュー、ないコードの実際の実行にコードを追加するときインターバルタイマーが示す指定されました。
onclickイベントハンドラは、前の例の300msの中で実行されている場合は、タイマーのコードは、タイマー設定後少なくとも300msの時に実行されます。かかわらず、それらがキューに追加されているかの、アイドルプロセスJavaScriptの実行後まで待たなければならないコードのすべてをキュー。フィギュア
リピートタイマー
コードは定期的にタイマーキューに挿入されることを保証するためにタイマーを作成したsetInterval（）を使用してください。このアプローチの問題点は、タイマーのコードはその間の任意の一時停止せずに、数回タイマ継続的に実行されるコードで、その結果、キューの前に完了していないコードの実行を再び添加してもよいということです。この問題を回避するのに十分幸運なことに、JavaScriptエンジンは、スマート。setInterval（）を使用する場合は、唯一のタイマーの無い他のコード例ならば、それはタイマーキューにコードを追加します。このタイマーは、コードがキュー指定された間隔の最小時間間隔に追加されることを保証します。
この繰り返しタイマルールは、二つの問題がある
：（1）一定の間隔がスキップされ、コードの実行の間隔は、（2）複数のタイマが予想よりも小さくてもよいです。
onclickイベントハンドラは200msののリピートタイマー間隔を設定するには（）のsetIntervalを使用していることを前提としています。イベントハンドラ300ミリ秒が完了するまでにもう少し時間を費やして、タイマーコードも同じくらいの時間を過ごしている場合は、状況が同時に発生するインターバルタイマとコードの連続運転をスキップします。
この例では、最初のタイマーがキューに追加されますが、それがでた後で205ms 300msのまで行うことができます。タイマーコードが実行されると、キューが405ms、別のコピーに追加与えました。即ち605msにおける次の間隔は、最初のコードは、タイマーがまだキューにタイマーコードのインスタンスが同時に実行されています。その結果、この時点でタイマーのコードでは、キューに追加されることはありません。タイマコードの終了後に結果が405msで直ちに実行されるように5msのタイマー追加したコードに追加されます。
setIntervalを避けるために（）これらの二つの欠点は、タイマーを繰り返し、あなたがチェーンのsetTimeoutを使用して、次のコールモードを使用することができます（）。
setTimeout（関数（）{
//処理
setTimeout（arguments.calleeの間隔）。
}、間隔）
このパターンの
チェーンはのsetTimeout（）を呼び出し
、関数が実行されるたびに新しいタイマーを作成します。第二のsetTimeout（）コールarguments.calleeのは現在実行中の関数への参照を取得し、別のタイマーを設定するために使用されます。これの利点は、そのコードは、タイマーキューに新しいコードを挿入ミッシング間隔がないことを保証するものではありませんが、前にタイマー終了前に実行されています。また、コードは、少なくとも連続運転を回避するために、指定された時間間隔に待機する、次のタイマの前に実行されることを保証します。主にタイマーのために使用されている。このモードでは、次の例を繰り返します。
setTimeout（関数（）{
VaRのDIV =のdocument.getElementById（ "myDiv"）;
左=のparseInt（div.style.left）+ 5。
div.style.left =左+ "PX"。
IF（左<200）{
setTimeout（arguments.calleeの、50）。
}
}、50）;
左は200ピクセル座標ときに、このタイマーは、各タイムコードは、右への<div>要素を実行する場合と停止します。
このモデルを使用して、JavaScriptのアニメーションは非常に一般的です。
転載この記事：JavaScriptの高度なプログラミング（第3版）