WebページでJavaScriptの最も基本的な機能は、ユーザーアクションを聞いたり応答したりすることです。これは非常に便利です。一部のユーザーのアクションは非常に頻繁ですが、他のユーザーは非常にまれです。一部のリスナー関数は稲妻のように実行されますが、一部のリスナーはブラウザを死に止めるのに重いです。たとえば、ブラウザウィンドウのサイズ変更イベントをご覧ください。このイベントは、ブラウザウィンドウサイズのすべてのスケール変更で1回トリガーされます。リスナーが大きい場合、ブラウザはすぐにドラッグされます。
明らかに、ブラウザのドラッグを許可することはできませんが、リスナーを削除することはできません。ただし、関数呼び出しの頻度を制限し、イベント機能操作の影響を弱めることができます。ウィンドウのサイズの変更をリスナー関数を一度トリガーすると比較すると、合理的なコールチャネルを維持し、ユーザーエクスペリエンスが破壊されないようにするために、数ミリ秒よりも大きい関数のトリガーの最小間隔を聞くことができます。 underscore.jsという優れたJSツールライブラリがあります。これには、イベント関数の頻度を減らすリスナーを簡単に作成できる簡単な方法があります。
JavaScriptコード
ダウンスイッチリスナーのコードは簡単です：
コードコピーは次のとおりです。
//リスナーを作成します
var updateLayout = _.debounce（function（e）{
//ここですべてのレイアウトを更新します
}、500）; //少なくとも500ミリ秒ごとに1回実行します
//イベントリスナーを追加します
window.addeventlistener（ "resize"、updateLayout、false）;
...このUnderscore.jsコードの基礎となるレイヤーは、実際に間隔を使用してイベント関数呼び出しの頻度を確認しています。
//関数を返します。
//トリガーされます。関数は、その呼び出されなくなった後に呼び出されます
// nミリ秒。 「即時」が渡された場合、の関数をトリガーします
//トレーリングの代わりにリーディングエッジ。
_.debounce = function（func、wait、incime）{
var Timeout;
return function（）{
var context = this、args = arguments;
var later = function（）{
タイムアウト= null;
if（！interim）func.apply（context、args）;
};
var callnow = intime &&！timeout;
ClearTimeout（Timeout）;
Timeout = setimeout（後で、待ちます）;
if（callnow）func.apply（context、args）;
};
};
コードは特に複雑ではありませんが、自分で書く必要がないことは一種の幸せでもあります。このdebounce関数は、他のunderscore.js関数に依存しないため、この方法をjqueryやmootoolsなどのお気に入りのJSツールライブラリに追加できます。
コードコピーは次のとおりです。
// Mootools
function.implement（{
debounce：function（wait、incime）{
varタイムアウト、
func = this;
return function（）{
var context = this、args = arguments;
var later = function（）{
タイムアウト= null;
if（！interim）func.apply（context、args）;
};
var callnow = intime &&！timeout;
ClearTimeout（Timeout）;
Timeout = setimeout（後で、待ちます）;
if（callnow）func.apply（context、args）;
};
}
}）;
//それを使用してください！
window.addevent（ "resize"、myfn.debounce（500））;
上記のように、ウィンドウのサイズ変更イベントは、周波数ダウン操作を使用する最も一般的な場所です。もう1つの一般的な場所は、ユーザーのキー入力に基づいて自動完了プロンプトが与えられることです。私はそのようなコードスニペットを収集するのが本当に好きです。これにより、ウェブサイトをより効率的にすることができます。同時に、私はあなたがEnderscore.jsを研究することをお勧めします。