どのようにJavaScriptの中でイベント関数の高周波トリガと呼び出しを防止しますか?

ウェブページの中で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);
	};
};

コードは特に複雑ではないですが、自分で書かなくても幸せです.このdebounce関数は他のUnderscore.js関数に依存していませんので、この方法を好きなjsツールライブラリに追加できます.例えばjQueryやMooToolsなど、簡単です.

// 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));

上述したように、ウィンドウのresizeイベントは最も一般的に使用されるダウンコンバート操作の場所であり、もう一つのよく使われているところは、ユーザーのボタン入力に応じて自動的に補完するということです.私はこのようなコードの断片を集めるのが大好きです.それらはあなたのウェブサイトをより効率的にすることができます.Underscore.jsを研究することを勧めます.中には非常に有用な関数がたくさんあります.