スロットル機能の概要

機能を絞る
window.onresizeイベントを呼び出した場合の動作は非常に頻繁に操作DOM消費性能であるので、この場合の関数は、タイマーで絞らできるのであれば、。
スロットル機能の基本的な考え方は次のとおりです。
いくつかのコードの実行を中断せずに繰り返すことはできません。
関数の最初の呼び出し、タイマーを作成し、指定された間隔の後にコードを実行します。
第二の機能は、タイマーの前にクリアした後と呼ばれ、他に設定されています。タイマーの前に実行された場合は、この操作は、任意の意味がありません。
しかし、すでに実際には、そうしない場合は、タイマーの前に、それは新しいタイマーに置き換えられます。
目的は、実行するためにいくつかの時間後に停止機能を実行するための唯一の要求です。以下は、モデルの基本的な形式であります：

var processor = {
	timeoutId: null,
	//实际进行处理的方法
	performProcessing: function(){
		//实际执行的代码
	},
	//初识处理调用的方法
	process: function(){
		clearTimeout(this.timeoutId);
		var that = this;
		this.timeoutId = setTimeout(function(){
			that.performProcessing();
		},100)
	}
}
processor.process();

工程（）が呼び出されなければならない任意の治療を初期化します。
performProcessing（実際に完了するように処理します）。

このモードは、スロットル（）簡素化する機能、このタイマー機能が自動的に設定することができ、クリア、次の例を使用することができます。

function throttle(method,context){
	clearTimeout(method.tId);
	method.tId = setTimeout(function(){
		method.call(context);
	},100)
}

スロットル（）関数は2つの引数を受け付けます。

実行される関数法
ここで、実行の範囲

この機能上記の最初のいずれかの以前に設定されたタイマをクリアします。
特定のアプリケーションの機能の調整を見てください：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数节流</title>
</head>
<body>
    <div id='root' style="background: red;">
       123
    </div>
    <script>
        var root = document.getElementById('root');
        function reszie(){
            console.log('offsetWidth',root.offsetWidth);
            root.style.height = root.offsetWidth + 'px';
            root.style.background = 'red';
        }
        window.onresize = function(){
            throttle(reszie);
        }
        //method 要执行的函数
        //context 在哪个作用域
        function throttle(method,context){
            clearTimeout(method.tId);
            method.tId = setTimeout(function(){
                method.call(context);
            },1000)
        }
    </script>
</body>
</html>

おすすめ