JavaScript_javascript スキルでの高頻度のトリガーとイベント関数の高頻度呼び出しを防止する方法

Web ページにおける JavaScript の最も基本的な機能は、ユーザーのアクションを監視または応答することであり、非常に便利です。ユーザーのアクションには、非常に頻繁に行われるものもあれば、非常にまれなものもあります。一部のリスナー関数は超高速で実行されますが、他の関数は処理が厳しく、ブラウザーを死に至らしめる可能性があります。ブラウザ ウィンドウのサイズ変更イベントを例に挙げます。リスナーが大きい場合、このイベントはブラウザ ウィンドウのサイズが変更されるたびに 1 回トリガーされます。

ブラウザをダウンさせることはできませんが、削除リスナーを削除することはできません。ただし、関数呼び出しの頻度を制限し、イベント関数実行の影響を弱めることができます。ウィンドウのサイズが変更されるたびにリスナー関数を 1 回トリガーする代わりに、リスナー関数をトリガーする最小間隔を特定のミリ秒より大きく設定できるようになりました。これにより、合理的な呼び出しチャネルが維持され、ユーザーが確実に経験は破壊されません。 Underscore.js という優れた JS ツール ライブラリがあります。これには、イベント関数のトリガーの頻度を減らすリスナーを簡単に作成できるシンプルなメソッドがあります。

JavaScript コード

周波数削減リスナーのコードは非常に単純です:

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

// リスナーを作成します
var updateLayout = _.debounce(function(e) {

// すべてのレイアウト更新をここで行います

}, 500); // 少なくとも 500 ミリ秒ごとに実行します

// イベントリスナーを追加します
window.addEventListener("resize", updateLayout, false);
...この Underscore.js コードの最下層は、実際には、interval を使用してイベント関数呼び出しの頻度をチェックします:

// 呼び出され続ける限り関数を返します
// 関数は呼び出されなくなった後に呼び出されます
// N ミリ秒。「immediate」が渡された場合、
で関数をトリガーします。 // トレーリングエッジではなく、リーディングエッジ。
_.debounce = function(func、wait、immediate) {
var タイムアウト;
return function() {
var context = this、args = 引数;
var Later = function() {
タイムアウト = null;
If (!immediate) func.apply(context, args);
};
var callNow = 即時 && !timeout;
clearTimeout(タイムアウト);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};

コードは特に複雑ではありませんが、自分で記述する必要がないのはありがたいことです。このデバウンス関数は他の Underscore.js 関数に依存しないため、このメソッドを jQuery や MooTools などのお気に入りの JS ツール ライブラリに非常に簡単に追加できます。

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

// MooTools
Function.implement({
デバウンス: 関数(待機、即時) {
var タイムアウト、
func = this;
return function() {
var context = this、args = 引数;
var Later = function() {
タイムアウト = null;
If (!immediate) func.apply(context, args);
};
var callNow = 即時 && !timeout;
ClearTimeout(タイムアウト);
タイムアウト = setTimeout(後で、待機);
If (callNow) func.apply(context, args);
};
}
});
// 使ってください!

window.addEvent("サイズ変更", myFn.debounce(500));

前述したように、ウィンドウのサイズ変更イベントは、頻度削減操作を使用する最も一般的な場所です。もう 1 つの一般的な場所は、ユーザーのキー入力に基づいて自動完了プロンプトを表示することです。私は、ウェブサイトを簡単に効率化できるこのようなコード スニペットを収集するのが大好きです。また、非常に便利な機能を多数提供する Underscore.js を学習することをお勧めします。