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+&#39; &#39;);
},100);
//可以明显感觉到时间间隔不相等
为了避免这种时间间隔的问题，我们可以采用链式调用setTimeout方法来取代setInterval。

//可以采用链式调用setTimeout来取代setInterval
var i = 0;
setTimeout(function(){
 //处理内容
 i++;
 for(var j=0;j<100000000;j++){}
 document.write(i+&#39; &#39;);
 //
 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 p = document.getElementByTagName(body);
 p.style.height = p.offsetWidth +'px';
}
//使用情况;
function resizep(){
 var p = document.getElementByTagName(body);
 p.style.height = p.offsetWidth +'px';
}
window.onresize = function(){
 throttle(resizep);
};
//只要代码是周期性执行的，都应该使用节流。

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

以上がJavaScriptで高度なタイマーのサンプルコードを作成して使用する方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。