JavaScript anti-shake and throttling detailed explanation

Debounce

Definition: For events that are triggered continuously in a short period of time, such as scrolling events, anti-shake means that the event processing function is executed only once within a certain time limit.

Regarding anti-shake, take the example of pressing a spring with your finger. Press the spring with your finger and keep pressing. The spring will not bounce until you release your finger.

Example resize:

function debounce(fn, wait){
    var timer = null;
    return ()=>{
        if(timer !== null){
            clearTimeout(timer);
        }
        timer = setTimeout(fn, wait);
    }
}
function handle(){
    console.log(Math.random());
}
window.addEventListener("resize",debounce(handle, 1000));

The above is the non-immediate execution version

Immediate execution version

function debounce(fn, wait){
	let timeid, flag = true;
	return () => {
		clearTimeout(timeid);
		if(flag){
			fn();
			flag = false;
		}else{
			timeid = setTimeout(()=>{
				flag = true;
			}, wait);
		}
	}
}

Dragging the browser window triggers resize, but the handle function is not triggered at this time. The timer starts counting. If the resize is triggered again within the timing time, the timer will start again. The advantage of this is that dragging the browser window to trigger resize does not execute the handle function frequently, but only allows it to run when it is needed, effectively eliminating redundancy.

Common writing methods:

const debounce = (func, delay = 200) => {
  let timeout = null
  return function () {
    clearTimeout(timeout)
    timeout = setTimeout(() => {
      func.apply(this, arguments)
    }, delay)
  }
}

Throttle

Definition : Let the event execute only once within a certain period of time.

The original intention is to be like the dripping of water from a faucet, executing only once within a specified time, reducing frequent and repeated execution.

Such as search box input event.

Calculate by timestamp:

function throttle(fn,wait){
  let startTime = 0;
  return function(){
    let endTime = Date.now();
    if(endTime-startTime>wait){
      fn();
      startTime = endTime;
    }
  }
}

By timer:

function throttle(fn,wait){
  let timeid = null;
  return function(){
    if(!timeid){
       timeid = setTimeout(function(){
         fn();
         timeid = null;
       },wait)
    }
  }
}

Summarize

This article ends here. I hope it can be helpful to you. I also hope that you can pay more attention to more content on 123WORDPRESS.COM!