JavaScript 関数 throttling についての簡単な説明_基礎知識-jsチュートリアル-php.cn

JavaScript 関数 throttling についての簡単な説明_基礎知識

WBOY

リリース： 2016-05-16 16:28:09

オリジナル

1474 人が閲覧しました

ブラウザーでの一部の計算と処理は、他のものよりもはるかに高価です。たとえば、DOM 操作には、非 DOM 操作よりも多くのメモリと CPU 時間が必要です。あまりにも多くの DOM 関連操作を連続して実行しようとすると、ブラウザがハングし、場合によってはクラッシュする可能性があります。これは、IE で onresize イベントハンドラーを使用する場合に特に発生する可能性が高く、ブラウザーのサイズが変更されると、イベントが継続的にトリガーされます。 onresize イベントハンドラー内で DOM 操作を実行しようとすると、頻繁に変更が行われるため、ブラウザがクラッシュする可能性があります。
関数スロットリングの背後にある基本的な考え方は、特定のコードは中断せずに継続的に繰り返し実行できないということです。関数が初めて呼び出されるとき、指定された間隔の後にコードを実行するタイマーが作成されます。この関数が 2 回目に呼び出されるとき、前のタイマーがクリアされ、別のタイマーが設定されます。前のタイマーがすでに実行されている場合、この操作は意味がありません。ただし、前のタイマーがまだ実行されていない場合は、実際には新しいタイマーに置き換えられます。その目的は、関数の実行要求がしばらく停止された後にのみ関数を実行することです。

コードをコピーコードは次のとおりです:

関数スロットル (メソッド、コンテキスト){

Cleartimeout (Method.tid);
method.tId = setTimeout ( function () {

メソッド.コール (コンテキスト);

、、、、、100);
}

応用例:

高さを幅と同じに保つ必要がある

要素があるとします。これは次のようにエンコードできます。

コードをコピーコードは次のとおりです: 関数resizeDiv(){

var div = document.getElementById("mydiv");

div.style.height = div.offsetWidth "px";

}

window.onresize = function(){

スロットル(resizeDiv);

}

 ここでは、サイズ変更機能は、resizeDiv という別の関数に組み込まれており、onresize イベント ハンドラーは、resizeDiv() を直接呼び出すのではなく、throttle() を呼び出して、resizeDiv 関数に渡します。ブラウザに保存される計算は非常に大きくなる場合がありますが、ほとんどの場合、ユーザーは変化を感じません。