Vue's latest anti-shake solution (must-read)

Function anti-shake (debounce):When the event is continuously triggered, the event will not be triggered within a certain period of time, and the event processing function will be executed once. If the event is triggered again before the set time comes, the delay will be started again. For example, when the scroll event is continuously triggered, the handle function is not executed. When the scroll event is not triggered within 1000 milliseconds, the scroll event will be triggered in a delayed manner.

Function throttling:When an event is continuously triggered, it is ensured that the event handling function is only called once within a certain period of time. The popular explanation for the reduction of circulation is for example, when the faucet is released, the water flows downwards as soon as the valve is opened. Adhering to the fine traditional virtues of thrift and thrift, we must turn the faucets downwards, preferably as we wish to drop downwards drop by drop at a certain time interval according to certain rules. For example, when the scroll event is continuously triggered, the handle function is not executed immediately, and the handle function is executed every 1000 milliseconds.

Anti-shake example:

<script>
const delay = (function () {
 let timer = 0
 return function (callback, ms) {
  clearTimeout(timer)
  timer = setTimeout(callback, ms)
 }
})()
export default {
methods：{
fn() {
   delay(() => {
    //Execution part   }, 500)
}
}
}
</script>

Throttle example:

var throttle = function(func, delay) {      
  var timer = null;      
  return function() {        
    var context = this;        
    var args = arguments;        
    if (!timer) {          
      timer = setTimeout(function() {            
        (context, args);            
        timer = null;          
      }, delay);        
    }      
  }    
}    
function handle() {      
  (());    
}    
('scroll', throttle(handle, 1000));

The above article Vue's latest anti-shake solution (must-read) is all the content I share with you. I hope you can give you a reference and I hope you can support me more.