機能アンチシェイク（デバウンス）および機能スロットル（スロットル）

揺れ防止の理解

何かをするためには、このことはすぐに行われるのではなく、一定期間後に行われるべきです。この期間内に何かがトリガーされた場合は、タイミングを再開する必要があります。たとえば、エレベータのドアを閉める。

応用
- ウィンドウサイズの変更
- テキストボックスの入力、Baidu検索
- スクロール・バー

防振コード

function debounce(callback,time){
    
    
	var timer;
	//为什么要返回一个函数，防止全局变量timer的污染。
	return function(){
    
    
		clearTimeout(timer);
		timer = setTimeout(()=>{
    
    
			callback.apply(null,arguments);
		},time);
	}
}

const handler = debounce((width)=>{
    
    
	console.log(width);
},1000);

window.onresize = function(){
    
    
	handler(document.documentElement.clientWidth);
}

分析：

ここに画像の説明を挿入します

これの拘束について。

次のように、外で自分を縛ります。

// 绑定this 指向window
  const func = function(width){
    
    
       console.log(width);
   }.bind(window);

   const handler = debounce(func, 1000)

   window.onresize = function () {
    
    
       handler(document.documentElement.clientWidth);
   }

これをパラメーターとして渡します。たとえば、最初のパラメーターは渡される情報で、2番目のパラメーターはthisです。ここのコードは、以下の防振アプリケーションの入力検索ボックスにあります。

const handler = debounce((val,inp) => {
    
    
            console.log('发送请求搜索' + val);
            //打印this
            cosole.log(inp)
        }, 1000);

search.oninput = function () {
    
    
	//传递this
     handler(this.value,this);
 }

防振アプリケーション入力検索ボックス

入力ボックスにテキストを入力するときは、対応するコンテンツを取得するためのリクエストを送信する必要があります。その後、入力イベントが継続的にトリガーされ、シェイク防止処理が必要になります。ユーザーが入力しました。

 <input type="text" id="search">
 
function debounce(callback,time){
    
    
	var timer;
	return function(){
    
    
		clearTimeout(timer);
		timer = setTimeout(()=>{
    
    
			callback.apply(null,arguments);
		},time);
	}
}

const handler = debounce((val) => {
    
    
            console.log('发送请求搜索' + val);
        }, 1000);

search.oninput = function () {
    
    
     handler(this.value);
 }

機能調整の理解

継続的にトリガーされるイベントの場合、指定された時間内に1回だけ実行します。たとえば、ウィンドウのサイズを絶えず変更しているので、指定した時間内に1回だけ関数を実行します。関数アンチシェイクとの違いは、アンチシェイクは、このイベントがトリガーされてから、関数を実行するまでにどれだけの時間を待たなければならないかということです。

スロットリングコードの実装1

タイマーを使用します。これは、イベントがトリガーされた後です。関数を実行する前に、しばらく待つ必要があります。

function throttle(callback,time){
    
    
	var timer;
	return function(){
    
    
		if(timer){
    
    
			return;
		}
		timer = setTimeout(()=>{
    
    
			callback.apply(null,arguments);
			timer = null;
		},time)
	}
}

スロットリングコードの実装2

タイムスタンプを使用すると、イベントがトリガーされた後、関数はすぐに実行され、関数は次回の一定期間まで実行されません。

function throttle(callback,time){
    
    
	var t;
	return function(){
    
    
		//t没有值，立即运行函数或者之前现在的时间减去运行的时间大于规定的时间
		if(!t || Date.now() - t >= time){
    
    
			
			callback.apply(null,arguments);
			//得到当前时间戳 为下一运行函数提供计算时间依据
			t = Date.now();	
		}
	}
}

グラフィック機能の防振と機能調整

ここに画像の説明を挿入します