setimeout（）
Settimeout（）メソッドは、指定されたミリ秒の数の後に関数または文字列が実行されることを指定するために使用されます。タイマーの番号を表す整数を返します。これは、ClearTimeout（）に渡すことができ、この関数の実行をキャンセルできます
次のコードでは、コンソールは最初に0を出力します。つまり、1秒後、タイマーSettimeout（）メソッドの返品値は出力です。
var timer = setimeout（function（）{console.log（タイマー）;}、1000）; console.log（0）;文字列パラメーターとして記述することもできます。このフォームにより、JavaScriptエンジンが2回解析され、パフォーマンスが低下するため、使用することはお勧めしません。
var timer = setimeout（ 'console.log（タイマー）;'、1000）; console.log（0）;
SettimeOutの2番目のパラメーターが省略されている場合、パラメーターはデフォルト0になります
次のコードでは、0と1がコンソールに表示されますが、0は前にあり、この質問については後で説明します。
var timer = setimeout（function（）{console.log（タイマー）;}）; console.log（0）;実際、最初の2つのパラメーターに加えて、Settimeout（）メソッドを使用すると、パラメーターを追加することもできます。これは、タイマー内の関数に渡されます。
次のコードでは、コンソールは約1000ms、つまり1秒後に2を出力します。ただし、IE9-O-Browserでは、SettimeOutのみが2つのパラメーターを持つことができ、より多くのパラメーターをサポートしません。 NANはコンソールに出力されます。
setimeout（function（a、b）{console.log（a+b）;}、1000,1,1）;IIFEパラメーター転送を使用して、IE9-O-ブラウザー関数パラメーター転送と互換性があります
setimeout（（function（a、b）{return function（）{console.log（a+b）;}}）（1,1）、1000）;または、タイマーの外側に関数を書き込み、その後、関数はタイマーの匿名関数のパラメーターで呼び出されます。
関数テスト（a、b）{console.log（a+b）;} setimeout（function（）{test（1,1）;}、1000）;これはを指します
このメカニズムによって指摘された4つの結合ルールは、このシリーズで詳細に導入されています。タイマー内のこれは暗黙的に失われ、エラーが非常に発生しやすいため、ここで再び説明されます。
var a = 0; function foo（）{console.log（this.a）;}; var obj = {a：2、foo：foo} setimeout（obj.foo、100）; // var a = 0に相当する;OBJオブジェクトでAプロパティ値を取得する場合は、暗黙のバインディングのためにタイマーの匿名関数にOBJ.FOO機能を配置できます。
var a = 0; function foo（）{console.log（this.a）;}; var obj = {a：2、foo：foo} setimeout（function（）{obj.foo（）;}、100）; // 2または、bindメソッドを使用して、foo（）メソッドのこれをobjにバインドすることもできます
var a = 0; function foo（）{console.log（this.a）;}; var obj = {a：2、foo：foo} setimeout（obj.foo.bind（obj）、100）; // 2cleartimeout（）
SettimeOut関数は、カウンター番号を表す整数値を返し、整数をClearTimeout関数に渡し、対応するタイマーをキャンセルします
// 100ms後、コンソールはsettimeout（）方法の返品値を出力します。
したがって、この値は、対応するタイマーをキャンセルするために使用できます
var timer = setimeout（function（）{console.log（Timer）;}、100）; ClearTimeout（タイマー）;または、返品値をパラメーターとして直接使用します
var timer = setimeout（function（）{console.log（Timer）;}、100）; ClearTimeout（1）;一般的に、SettimeOutによって返される整数値は継続的です。つまり、2番目のSettimeOutメソッドによって返される整数値は、最初の整数値より1大きいです。
//コンソール出力1、2、3VAR TIMER1 = setimeout（function（）{console.log（timer1）;}、100）; var timer2 = setimeout（console.log（timer2）;}、100）; var timer3 = setimeout（function.log（）{console.log（）; 100）;setInterval（）
SetIntervalの使用は、SettimeOutとまったく同じです。唯一の違いは、SetIntervalがタスクが時々実行されること、つまり無制限のタイミング実行された実行を指定することです。
<button id = "btn"> 0 </button> <script> var timer = setinterval（function（）{btn.innerhtml = number（btn.innerhtml） + 1;}、1000）; btn.onclick = function（）{clearinterval（timer）;[注] HTML5標準では、SettimeOutの最短時間間隔が4ミリ秒であると規定しています。 SetIntervalの最短間隔は10ミリ秒です。つまり、10ミリ秒未満の時間間隔は10ミリ秒に調整されます
ほとんどのコンピューターモニターの更新周波数は60Hzで、これは毎秒60回を補充するのとほぼ同等です。したがって、最もスムーズなアニメーション効果の最適なループ間隔は1000ms/60で、これはほぼ16.6msに等しい
電源を節約するために、ブラウザは現在のウィンドウにないページの時間間隔を1000ミリ秒に拡張します。さらに、ラップトップがバッテリー駆動型の場合、ChromeおよびIE 9以降は時間間隔をシステムタイマーに切り替えます。これは約16.6ミリ秒です
操作メカニズム
質問の前の部分を説明しましょう。なぜ0は、以下のコードのコンソール結果の1の前に表示されるのですか？
setimeout（function（）{console.log（1）;}）; console.log（0）;実際、SettimeOutの2番目のパラメーターを0Sに設定すると、機能をすぐに実行することを意味するのではなく、関数をコードキューに入れるだけです。
次の例では、イベントハンドラーがボタンBTNに設定されています。イベントハンドラーは、250ms後に呼び出すタイマーを設定します。このボタンをクリックした後、最初にonClickイベントハンドラーをキューに追加します。プログラムが実行された後、タイマーは設定されます。 250ms後、指定されたコードがキューに追加され、実行が待機されます。
btn.onclick = function（）{settimeout（function（）{console.log（1）;}、250）;}上記のコードのOnClickイベントハンドラーが300ミリ秒間実行されている場合、タイマーが設定されてから少なくとも300ミリ秒のタイマーコードを実行する必要があります。キュー内のすべてのコードは、キューにどのように追加されるかに関係なく、JavaScriptプロセスがアイドル状態になるまで待つ必要があります。
図に示すように、タイマーコードは255msで追加されましたが、オンクリックイベントハンドラーがまだ実行されているため、現時点では実行できません。初期のタイマーコードは300msです。つまり、オンクリックイベントハンドラーが終了した後、
SetIntervalの問題
setInterval（）を使用することの問題は、コードが再びキューに追加される前にタイマーコードが実行されなかった可能性があり、その結果、タイマーコードが一時停止せずに数回連続して実行されることです。 JavaScriptエンジンによるこの問題の解決策は、SetInterval（）を使用するときにタイマーコードをキューに追加することです。これにより、タイマーコードの最小時間間隔がキューに追加されることが保証されます。
ただし、これは2つの問題につながる可能性があります。1。いくつかの間隔がスキップされます。 2.複数のタイマーのコード実行間の間隔は、予想よりも小さい場合があります
特定のオンクリックイベントハンドラーが、serinterval（）を使用して200msインターバルタイマーを設定するとします。イベントハンドラーの完了に300ミリ秒以上かかり、タイマーコードもほぼ同じ時間がかかる場合、特定のインターバルが同時にスキップされます。
この例の最初のタイマーは、205msでキューに追加されますが、300msが通過するまで実行することはできません。このタイマーコードが実行されると、別のコピーが405msでキューに追加されます。次の間隔の605msでは、最初のタイマーコードがまだ実行されており、キューにはすでにタイマーコードのインスタンスがあります。その結果、この時点でのタイマーコードはキューに追加されません
SettimeOutを繰り返します
setinterval（）タイマーの問題を回避するために、Chained Settimeout（）呼び出しを使用できます
setimeout（function fn（）{setimeout（fn、interval）;}、interval）;このパターンチェーンはSettimeout（）を呼び出し、機能が実行されるたびに新しいタイマーが作成されます。 2番目のSettimeout（）は、現在実行されている機能を呼び出し、そのための別のタイマーを設定します。これの利点は、以前のタイマーコードが実行されるまで、新しいタイマーコードがキューに挿入されず、間隔が欠落していないことを確認することです。さらに、次のタイマーコードが実行される前に、少なくとも指定された間隔を待機し、継続的な操作を回避する必要があります。
setinterval（）を使用します
<div id = "mydiv" style = "height：100px; width：100px; background-color：pink; position：aspolute; left：0;"> </div> <script> mydiv.onclick = function（）{var timer = setinterval（function（）{if（mydiv.style.letle.Left）> 200）; false;} mydiv.style.left = parseint（mydiv.style.left） + 'px'、16）; } </script>ChainedSetimeout（）を使用します
<div id = "mydiv" style = "height：100px; width：100px; background-color：pink; position：aspolute; left：0;"> </div> <script> mydiv.onclick = function（）{settimeout（function fn（）{if（parseint（mydiv.style.style.left）<= 200） false;} mydiv.style.left = parseint（mydiv.style.left） + 'px'、16）; } </script>応用
タイマーを使用して、一連のイベントを調整します
[1] Web開発では、イベントが最初に子要素で発生し、次に親要素まで泡立ちます。つまり、子要素のイベントコールバック関数は、親要素のイベントコールバック関数よりも早くトリガーされます。最初に親要素のイベントコールバック関数を最初に行わせた場合、setimeout（f、0）を使用する必要があります
通常の状況では、div要素をクリックし、最初にポップアップしてから1ポップアップ1
<div id = "mydiv" style = "height：100px; width：100px; background-color：pink;"> </div> <script> mydiv.onclick = function（）{alert（0）;} document.onclick = function（）{alert（1）;} </script>ドキュメントのオンクリックイベントを最初に行う必要がある場合、つまり、Div要素をクリックすると、1が最初にポップアップされ、その後0がポップアップします。次に、次の設定を作成します
<div id = "mydiv" style = "height：100px; width：100px; background-color：pink;"> </div> <script> mydiv.onclick = function（）{setimeout（function（）{alert（0）;}）} document.onclick = function（）{alert（）;} </scrip【2】ユーザー定義のコールバック関数。通常、ブラウザのデフォルトアクションの前にトリガーされます。たとえば、ユーザーが入力ボックスにテキストを入力すると、ブラウザがテキストを受信する前にキープレスイベントがトリガーされます。したがって、次のコールバック関数は目標を達成できません
<入力型= "text" id = "myinput"> <script> myinput.onkeypress = function（event）{this.value = this.value.touppercase（）;} </script>上記のコードは、ユーザーがテキストを入力した直後に文字を大文字に変換したいと考えています。しかし、実際には、ブラウザが現時点でテキストを受信していないため、以前の文字を大文字に変換することしかできないため、最新の入力文字を取得できません。
SettimeOutで書き直すことによってのみ、上記のコードが機能することができます
<入力型= "text" id = "myinput"> <script> myinput.onkeypress = function（event）{settimeout（）{myinput.value = myinput.value.touppercase（）;} </script>コードはここで終了します。次の記事では、それを紹介します
BOMシリーズ：RequestAnimationFrame
BOMシリーズの3番目のタイマーアプリケーション（クロック、カウントダウン、ストップウォッチ、目覚まし時計）
上記は、編集者によって紹介されたBOMシリーズの最初のタイマーSettimeOutとSetIntervalです。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！