JavaScriptでイベント関数の高周波トリガと高周波呼び出しを防ぐ方法
明らかに、私たちはブラウザをドラッグすることができませんが、モニターを削除することはできません.しかし、関数呼び出しの頻度、弱化イベント関数の運転による影響を制限することができます.ウィンドウの各ステップのsizeの変化が一回のモニター関数をトリガすることに対して、現在のモニター関数のトリガの最小間隔は何ミリ秒以上でなければなりません.適切なチャンネルを維持して、ユーザー体験を壊さないようにしてください.良いjsツールライブラリがあります.Underscore.jsといいます.この中には簡単な方法があります.イベント関数のトリガ頻度を低減するモニターを簡単に作成できます.
JavaScriptコード
ダウンコンバータのコードは簡単です.
//
var updateLayout = _.debounce(function(e) {
// Does all the layout updating here
}, 500); // 500
// Add the event listener
window.addEventListener("resize", updateLayout, false);
… Underscore.js interval ：
// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
_.debounce = function(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
// MooTools
Function.implement({
debounce: function(wait, immediate) {
var timeout,
func = this;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
}
});
// Use it!
window.addEvent("resize", myFn.debounce(500));