Function anti-shake (debounce) and function throttling (throttle)

Anti-shake understanding

To do a thing, this thing is not to be done immediately, but to be done after a period of time. If something is triggered within this period of time, then the timing must be restarted. For example, the closing of elevator doors.

• application
  • Change of window size
  • The input of the text box, Baidu search
  • Scroll bar

Anti-shake code

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

analysis:

• Regarding the binding of this.

1. Bind yourself outside, such as:

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

   const handler = debounce(func, 1000)

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

2. Pass this as a parameter. For example, the first parameter is the information to be passed, and the second parameter is the this. The code here is in the input search box of the anti-shake application below.

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

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

Anti-shake application input search box

When entering text in the input box, we need to send a request to get the corresponding content, then the input event will be triggered continuously, then we need anti-shake processing, and send the request after a period of time after the user has entered.

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

Function throttling understanding

For continuously triggered events, only run once within the specified time. For example, constantly changing the size of the window, I only run the function once within the specified time. The difference with function anti-shake is that anti-shake has to wait how much time after this event is not triggered before running the function.

Throttling code implementation 1

Use a timer, this is after the event is triggered, it will take a while to run the function.

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

Throttling code implementation 2

Using timestamps, after triggering the event, the function is run immediately, and the function will not run until a period of time next time.

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

Graphic function anti-shake and function throttling