ブラウザのJavaScriptでUIループを実行する2つの基本的な方法はsetTimeout
、次のsetInterval
とおりです。
setTimeout
ミリ秒単位で指定された間隔の後に関数を呼び出します。タイミングは必ずしも正確ではなく、通常、ブラウザで10ミリ秒以内に何かをスケジュールすることはできません。を介してコールバックをキャンセルするために使用できるハンドルを返します(発生する前にコールバックに到達した場合)clearTimeout
。ループを実行するには、前のタイムアウトの処理が完了したときに新しいタイムアウトを設定します。
setInterval
指定された間隔で関数を繰り返し呼び出します(これもミリ秒単位で、通常は最小10ミリ秒です)。を介して繰り返しを停止するために使用できるハンドルを返しますclearInterval
。毎回新しいものを開始する必要はありません。インタプリタがループを実行します。
どちらを選択するかは、何をしようとしているかと個人的な好みの両方によって異なります。の間隔はsetInterval
、コールバックが呼び出されたときからカウントされますが、コールバック処理の最後に新しいスケジュールを設定した場合はsetTimeout
、その時点から明らかにスケジュールされることに注意してください。処理にかなりの時間がかかる場合は、違いが重要になる可能性があります(ただし、どちらが必要かは、解決している問題に完全に依存します)。
「持続時間」は、エフェクト全体が実行されるのにかかる時間と考えています。これは、これらのいずれかの外側にあります。これは、エフェクトコードの関数になります。私が見たほとんどの効果は段階的に実行され(他にどのように行うかはわかりません)、与えた期間と作成者が必要だと考えた最大の粒度に基づいて、実行する手順の数を計算します。たとえば、白から黒へのフェードは、必要に応じて255ステップかかる場合がありますが、速度が遅すぎる可能性があります(人間の目と心がどのように知覚するかに応じてステップが調整される、「緩和」の説明は省略します)。 )。合計0.5秒かかるように指示された場合は、50ミリ秒ごとに10ステップで実行できますが、1秒かかる場合は、同じ間隔で20ステップで実行できます。