JavaScript タイマーの解釈 I

注: この記事は、 John Resigの書籍「Secrets of the JavaScript Ninja」から抜粋したものです。翻訳に不備がある場合は修正してください。

この記事では主に次の観点からタイマーについて説明します。

1. タイマーの概要。
2. タイマー速度の詳細な分析。
3. 大規模なタスクを処理するにはタイマーを使用します。
4. タイマーを使用してアニメーションを管理します。
5. タイマーテストの改善

タイマーについてはほとんど理解されていないため、悪用されることがよくあります。実際、これは複雑なアプリケーション開発に非常に役立ちます。タイマーはコード フラグメントの実行を非同期に遅らせる機能を提供します。JavaScript は本質的にシングルスレッドです (特定の時間範囲内で実行できるのは js コードの一部だけです)。したがって、タイマーはこの制限を回避する方法を提供します。コードを実行する別の方法を考えてみましょう。

興味深いことに、一般に受け入れられている考えに反して、タイマーは JavaScript 言語の一部ではなく、ブラウザによって導入されるメソッドとオブジェクトの一部です。これは、ブラウザ以外の環境で実行することを選択した場合、タイマーが存在しない可能性があり、特定の機能 (Rhino スレッドなど) を使用して独自のバージョンを実装する必要があることを意味します。

1. タイマーの仕組み

基本的に、タイマーがどのように機能するかを理解することが重要です。多くの場合、タイマーの動作は別のスレッドにあるため直感的ではありません。まず 3 つの関数のテストから始めましょう。それぞれにタイマーを構築して制御する機会があります。

• var id = setTimeout(fn,lay); 遅延時間の経過後に特定の関数を呼び出すタイマーを開始します。この関数は後でタイマーをキャンセルできるようにします。
• var id = setInterval(fn,layout); setTimeout と似ていますが、キャンセルされるまで関数を (特定の遅延時間で) 呼び出し続けます。
• clearInterval(id)、clearTimeout(id); はタイマーの ID (上記の関数のいずれかによって返される) を受け入れ、タイマーの呼び出しを停止します。

タイマーが内部でどのように動作するかを理解するには、遅延が保証されていないという重要な概念について説明する必要があります。ブラウザ内のすべての JavaScript は単一のスレッドで実行されるため、非同期イベント (マウス クリック、タイマーなど) は、実行中にオープン状態になった場合にのみ実行されます。次の例は、この問題をよく示しています。

この図には理解しなければならない情報がたくさんあります。それを完全に理解すると、非同期 JS 実行についてよりよく理解できるようになります。図は 1 次元であり、垂直方向は時間 (壁時計) であり、ミリ秒単位で測定されます。青いボックスは、js の実行の割合を表します。たとえば、最初の JavaScript ブロックの実行には約 18 秒かかり、マウスのクリックには約 11 秒かかります。