Implement anti-shake and throttling functions

What is throttling

Specify a unit of time, within which the callback function that triggers the event can only be executed once

1. Timer

let box = document.querySelector( ".box")box.addEventListener( "touchmove", throttle(demo, 2000))function throttle(event, time){let timer = nullreturn function(){if(!timer) {timer = setTimeout(() =>{event();timer = null;}, time);}}}function demo(){console.log('Initiate request')}

2. Timestamp

var throttle = function(fn, delay) {var prev = Date.now();return function() {var context = this;var args = arguments;var now = Date.now();if (now - prev >= delay) {fn.apply(context, args);prev = Date.now();} }} }}function handle() {console.log(Math.random());}window.addEventListener('scroll', throttle(handle, 1000));

What is anti-shake

When the event is triggered continuously, the event handler will only be executed once if the event is not triggered again within a certain period of time. If the event is triggered again before the set time arrives, the delay will start again.

let telInput = document.querySelector( 'input' )telInput.addEventListener( 'input' , antiShake(demo, 2000))//Anti-shake packagefunction antiShake(fn, wait){let timeOut = null;return args =>{if(timeout) clearTimeout(timeOut)timeOut = setTimeout(fn, wait);}}function demo(){console.log('Initiate request')}