JavaScriptの高度なtimer_javascriptスキルの詳細な説明

setTimeout() と setInterval() はタイマーの作成に使用できますが、それらの基本的な使用法はここでは紹介しません。ここではJavaScriptのコードキューを中心に紹介します。 JavaScript のコードはすぐには実行されません。プロセスがアイドル状態になるとすぐに実行されます。したがって、タイマーに設定された時間は、実行時間が一致する必要があるという意味ではなく、指定された時間間隔の後にコードがキューに追加されて待機することを意味します。この時点でキューに他に何もない場合、このコードが実行され、コードが正確に指定された時点で実行されたように見えます。したがって、いくつかの問題が発生します。

リピートタイマー

通常、setInterval メソッドを使用して、特定のコードを同じ時間間隔で繰り返し実行します。ただし、この方法の使用には 2 つの問題があります。1 つ目は、一部の間隔がスキップされることです。2 つ目は、複数のタイマーのコード実行間隔が予想よりも短くなる可能性があることです。
ここで例を見てみましょう。 onclick イベント ハンドラーが setInterval を使用して 200 ミリ秒間隔の繰り返しタイマーを設定する場合、イベント ハンドラーが完了するまでに 300 ミリ秒かかる場合、時間間隔をスキップしてタイマー コードを実行します。
次のコードからも結論を得ることができます:

//重复定时器
var i =0;
setInterval(function(){
 //如果事件处理时间长于间隔时间
 i++;
 for(var j=0;j<100000000;j++){}
 document.write(i+' ');
},100);
//可以明显感觉到时间间隔不相等
为了避免这种时间间隔的问题，我们可以采用链式调用setTimeout方法来取代setInterval。

//可以采用链式调用setTimeout来取代setInterval
var i = 0;
setTimeout(function(){
 //处理内容
 i++;
 for(var j=0;j<100000000;j++){}
 document.write(i+' ');
 //
 setTimeout(arguments.callee,100);
},100);
//这样处理效果明显好多了。

関数が実行されるたびに、新しいタイマーが作成されます。2 番目の setTimeout 呼び出しでは、arguments.callee を使用して、現在実行されている関数への参照を取得し、その関数に別のタイマーを設定します。これは、前のタイマー コードが実行されるまで新しいタイマー コードがキューに挿入されず、欠落した間隔がなく、次のタイマー コードが実行されるまで少なくとも指定された時間待機するようにするために行われます。連続実行を避けるための間隔。現在、主流のフレームワークにおけるアニメーションは、一般にこの方法で反復タイミングを実装していると言えます。

機能のスロットル

タイマーはタイミングを計るために使用されるだけでなく、ブラウザへの負荷を軽減するためにも使用できます。ブラウザー内の一部の計算と処理は、他のものよりもはるかに高価です。たとえば、DOM 操作を大量に継続的に使用すると、ブラウザーがハングしたり、クラッシュしたりする可能性があります。
関数スロットルの基本的な考え方は、特定のコードを中断せずに継続的に繰り返し実行することはできないということです。関数が初めて呼び出されるとき、指定された間隔の後にコードを実行するタイマーが作成されます。この関数が 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);
};
//只要代码是周期性执行的，都应该使用节流。

これはユーザーにあまり良い印象を与えませんが、ブラウザーにかかる負荷は大幅に軽減されます。関数スロットリングも、多くのフレームワークで一般的に使用される手法の 1 つです。

上記は JavaScript の高度なタイマーに関する概要であり、皆様の学習に役立つことを願っています。