Handwritten universal anti chattering and throttling function

We often bind some continuously triggered events , such as resize、scroll、mousemove wait , If the event call is unlimited , Will increase the burden on browsers , It leads to poor user experience , We can use debounce( Shake proof ) and throttle( throttle ) To reduce frequent calls , At the same time, it will not affect the actual effect .

The concept of anti shake

After the event is triggered n Seconds to execute the function , If in n The event is triggered in seconds , The function execution time is recalculated
The anti shake function can be divided into immediate execution , And non immediate execution
Straight white ： For a certain period of time , Only the last operation is valid , In another wait Ms before the function is executed
Use scenarios ： For example, when dragging to change the size of the browser , Need to change after When the event is triggered again , You can use anti shake .

// Handwriting JS General anti shake function 
let timeout = null;
/** *  Anti shake principle ： For a certain period of time , Only one last operation , In another wait Ms before the function is executed  * * @param {Function} func  The callback function to execute  * @param {Number} wait  Delay time  * @param {Boolean} immediate  Whether to execute immediately  * @return null */
const debounce = function(func, wait = 500, immediate = false) {
    
	if (timeout !== null) clearTimeout(timeout);
	if (immediate) {
    
        return (...args) => {
    
            let callNow = !timeout;
            timeout = setTimeout(() => {
    
                timeout = null
            }, wait);
            if(callNow) typeof func === 'function' && func.call(undefined, ...args)
        }
	} 
    else {
    
        return (...args) => {
    
            timeout = setTimeout(() => {
    
                typeof func === 'function' && func.call(undefined, ...args)
            }, wait);
        }
	}
};
const d = (name) => {
    
    console.log(' Execute function print ',name)
}
let d2=debounce(d,2 * 1000)
d2(' The Monkey King ')

The concept of throttling

Continuous triggering events , But in n Execute function only once per second .
Straight white ： In a certain amount of time , Trigger only once
Use scenarios ： For example, the user clicks the snap up button , Suppose that every 5 You can only effectively click once per second , Then you can use throttling . Throttling is usually used on buttons .

// Handwriting JS General throttle function 
let timer;
/** *  Throttling principle ： In a certain amount of time , Trigger only once  * * @param {Function} func  The callback function to execute  * @param {Number} wait  Delay time  * @param {Boolean} immediate  Whether to execute immediately  * @return null */
const throttle = function (func, wait = 500, immediate = true, context = undefined) {
    
    if (immediate) {
    
        return (...args) => {
    
            if (timer) return
            typeof func === 'function' && func.call(context, ...args)
            timer = setTimeout(() => {
    
                timer = null
            }, wait)
        }
    }
    else {
    
        return (...args) => {
    
            if (timer) return
            timer = setTimeout(() => {
    
                timer = null
                typeof func === 'function' && func.call(context, ...args)
            }, wait)
        }
    }
};
const d = (name) => {
    
    console.log(' Execute function print ', name)
}
let d2 = throttle(d, 2 * 1000, true);
d2(' The Monkey King ')