How it works: The callback is executed after the time is triggered for n seconds. If it is triggered again within n seconds, the timer is reset

Applicable scenarios:

  • Button submission scenario: Prevents multiple button submissions and only performs the last submission
  • Search box Associative scenario: Only the last input is sent to prevent associative sending requests
Function debounce(func,wait){let timeout; return function(){ const context=this; const args=arguments; clearTimeout(timeout); timeout=setTimeout(() => { func.apply(context,args); }, wait); }} // Execute now version implementation: sometimes you want to execute functions immediately, and then wait n seconds to stop firing before you can execute again. function debound1(func,wait,immediate){ let timeout; return function(){ const context=this; const args=arguments; if(timeout) clearTimeout(timeout); if(immediate){ const callNow=! timeout; timeout=setTimeout(() => { timeout=null; }, wait); if(callNow) func.apply(context,args); }else{ timeout=setTimeout(() => { func.apply(context,args); }, wait); }}} // The func function may return a value, so we need to return the result of the function, but when immediate is false, because setTimeout is used, we assign the return value of func. Apply (context,args) to the variable. And finally when you return, the value will always be undefined, Function debounce2(func,wait,immediate){let timeout,result; return function(){ const context=this; const args=arguments; if(timeout) clearTimeout(timeout); if(immediate){ const callNow=! timeout; timeout=setTimeout(() => { timeout=null; }, wait) if (callNow) result=func.apply(context,args); }else{ timeout=setTimeout(() => { func.apply(context,args); }, wait); } return result; }}Copy the code

The throttle

Principle: Specifies that only one function can be triggered in a unit of time. If more than one function is fired in this unit of time, only one function will take effect

Applicable scenarios:

  • Drag scenario: Perform this operation only once in a fixed period to prevent frequent position changes
  • Zoom scenario: Monitor browser resize
When the trigger event occurs, we take the current timestamp and subtract the previous timestamp (initially set to 0). If it is greater than the set time period, we execute the function. Then we update the timestamp to the current timestamp. Function throttle(func,wait){let context,args; let previous=0; return function(){ let now=+new Date(); context=this; args=arguments; if(now-previous > wait){ func.apply(context,args); Previous =now}}} Function throttle1(func,wait){let timeout; function throttle1(func,wait){let timeout; function throttle1(func,wait){let timeout; return function(){ const context=this; const args=arguments; if(! timeout){ timeout=setTimeout(() => { timeout=null; func.apply(context,args); }, wait); }}} // Difference: throttling guarantees that the function will execute once in a certain period of time, no matter how often events are triggered. // flag version const throttle2=(func,wait)=>{let flag=true; return function(... args){ if(! flag) return; flag=flase; setTimeout(() => { func.apply(this,args) flag=true; }, wait); }}Copy the code