JavaScriptでのタイマーの仕組み

注：以下は、John Resigの「JavaScriptタイマーの動作」の翻訳です。jQuery では 、さまざまな遅延関数実行メソッドの複雑さを明確かつ詳細に説明しています。 クライアントのパフォーマンスに関する私のコメントは斜体で示しています。



最も基本的なレベルでは、JavaScriptでタイマーがどのように機能するかを理解することが非常に重要です。 非常に多くの場合、タイマーの操作は、すべて同じスレッド内で実行されているという事実により、直感と矛盾するようです。 しかし、タイマーを作成および管理するために使用する3つの主要な機能を特徴付けることから始めましょう。

• var id = setTimeout(fn, delay);
  
  
  
  -単一のタイマーを作成します。その操作は、指定された遅延後に特定の関数の呼び出しに変換されます。 このメソッドは一意のIDを返します。このIDを使用して、後でタイマーをキャンセルできます。
• var id = setInterval(fn, delay);
  
  
  
  -以前のsetTimeout
  
  
  
  と似ていますが、キャンセルされるまで、指定された関数を絶えず（指定された遅延で毎回）呼び出します。
• clearInterval(id);
  
  
  
  、 clearTimeout(id);
  
  
  
  -タイマーIDパラメーター（前の2つのメソッドで返される）をパラメーターとして使用し、それ以上のタイマー呼び出しを防ぎます。

タイマーの動作の内部的な側面を理解するために、強調すべき重要な詳細を検討する価値があります。タイマーの実行の遅延は保証されていません。 すべてのJavaScriptは1つのスレッドのブラウザーで実行されるため、非同期イベント（マウスクリックやタイマーなど）は、このメインスレッドに「ウィンドウ」が表示されたときにのみトリガーされます（ 実際、イベントハンドラーと呼び出された関数はメイン実行スレッドに「埋め込まれ」、 重いコンピューティングの組織についての詳細 ）。 これは、次の図を使用して最もよく実証できます。







図1. JavaScriptで動作するタイマー



webo.inで詳細を読む→