javascriptの高級タイマーを深く理解します.

set Timeout()とset Interval()はタイマーを作成するために使用できます.その基本的な使い方はここでは紹介しません.ここでは主にjavascriptのコード列を紹介します.javascriptにはコードがありません.直ちに実行されます.一旦、プロセスが空き次第、早く実行します.したがって、タイマーで設定された時間は、実行時間が一定であることを意味するのではなく、代表コードが指定された時間間隔後に列に追加して待機します.この時点で列に他のものがない場合、コードは実行され、コードは正確に指定された時点で実行されるように見える.だから問題が発生します.
繰り返しタイマー
通常、私たちはsetInterval方法を使用して、同じ時間間隔であるコードを繰り返し実行します.しかし、この方法を使うと、二つの問題があります.一つ目はいくつかの間隔がスキップされます.二つ目は、複数のタイマーのコード実行間の間隔が予想より小さいかもしれない.ここでは、例えば、あるオンクリーンイベントハンドラがsetIntervalを使って200 ms間隔の重複タイマーを設定していると、イベントハンドラが300 msの時間で完了すれば、一定のタイム間隔をスキップして同時に1つのタイマーコードを実行しています.私たちも下記のコードで結論を得ることができます.

//     
var i =0;
setInterval(function(){
  //              
  i++;
  for(var j=0;j<100000000;j++){}
  document.write(i+' ');
},100);
//              

このような時間間隔の問題を避けるために、setIntervalの代わりにチェーン式でsetTimeoutを呼び出す方法を採用することができる.

//        setTimeout   setInterval
var i = 0;
setTimeout(function(){
  //    
  i++;
  for(var j=0;j<100000000;j++){}
  document.write(i+' ');
  //
  setTimeout(arguments.callee,100);
},100);
//           。

関数が実行されるたびに、新しいタイマーが作成されます.第二のsetTimeout呼び出しは、argments.calleeを使用して、現在実行されている関数への参照を取得し、他のタイマーを設定します.このようにするのは、前のタイマーコードが実行される前に、列に新しいタイマーコードを挿入しないために、欠けた間隔がないようにしてください.次のタイマーコードが実行される前に、少なくとも指定された間隔を待って、連続的なラインを回避してください.一石二鳥とも言えるように、現在の主流の枠組みの中のアニメは普通このように繰り返しのタイミングを実現しています.
関数の流れ
タイマーはタイミングだけでなく、ブラウザの圧力を緩和するためにも使えます.ブラウザのいくつかの計算と処理は他のものよりかなり高価です.例えば、DOM操作は、より多くのメモリとCPU時間が必要になります.関数の流れの基本的な考え方は、いくつかのコードが途切れなく連続的に繰り返されてはいけないということです.最初に関数を呼び出して、タイマーを作成し、指定された時間間隔の後にコードを実行します.この関数を2回目に呼び出すと、前回のタイマーをクリアして設定します.目的は、実行関数の要求が一時停止してから実行するためです.コードは以下の通りです

//        
function throttle(method,context){
  clearTimeout(method.tId);
  method.tId = setTimeout(function(){
    method.call(context);
  },100);
}
//         ，          ，       。
//    demo
//     ：
window.onresize = function(){
  var div = document.getElementByTagName(body);
  div.style.height = div.offsetWidth +'px';
}
//    ;
function resizeDiv(){
  var div = document.getElementByTagName(body);
  div.style.height = div.offsetWidth +'px';
}
window.onresize = function(){
  throttle(resizeDiv);
};
//           ，       。

このようにユーザーに与える感覚はそんなに大きくないです.確かにブラウザに多くの圧力を減らしました.関数節流は多くのフレームでよく使われるテクニックの一つです.
デモの位置