Function anti chattering throttling

Function anti chattering and throttling are both methods to control the trigger frequency of events , There are also many application scenarios , Such as ：

1. The input box keeps typing , Send the input content to the server for verification ;

2. Trigger click events many times ;

3.onSroll Scroll bar scroll Events ;

4.onmousemove Mouse movement events ;

Case study

To illustrate , Suppose a scenario ： Mouse over a div, Trigger onmousemove event , The text inside it will display the coordinates of the current mouse . Its effect is like this

>> Function anti shake (debounce)

there “ Shaking, ” Is that the function is triggered , The general jitter is multiple and continuous . Suppose a function continues to execute multiple times , We want it to cool down and execute in a few seconds . That is, when the event continues to trigger, do not execute , Wait for a period of time after the last trigger .

>> Function throttling (throttle)

Throttling is to let the function execute in moderation , Instead of executing every trigger . That is to say, within the prescribed time , Only once .

>> Code implementation

     /**
     * @desc Function anti shake
     * @param func function
     * @param wait Delay execution in milliseconds
     * @param immediate true Watch immediately ,false Not immediately
     * The immediate version means that the function is executed immediately after the event is triggered , then n Does not trigger the event in seconds to continue the function's effect ( After the event is triggered for the first time , After the next trigger, if the time from the last trigger is less than n Seconds, then it won't be executed again , If it is greater than, it will execute )
     * The non immediate version means that the function does not execute immediately after the event is triggered , But in n Seconds later , If in n Seconds to trigger the event , The function execution time is recalculated ( The first trigger does not execute , The pause time after the event is triggered exceeds n Seconds will be executed automatically )
     */
    function debounce(func, wait, immediate) {
        let timeout;
        return function () {
            let context = this;
            let args = arguments;
            if (timeout) clearTimeout(timeout);
            if (immediate) {
                var callNow = !timeout;
                timeout = setTimeout(() => {
                    timeout = null;
                }, wait)
                if (callNow) func.apply(context, args)
            }
            else {
                timeout = setTimeout(function () {
                    func.apply(context, args)
                }, wait);
            }
        }
    }
 
    /**
     * @desc Function throttling
     * @param func function
     * @param wait Delay execution in milliseconds
     * @param type 1 Time stamp version of table ,2 Watch timer version
     */
    function throttle(func, wait, type) {
        let previous,timeout;
        if (type === 1) {
            previous = 0;
        } else if (type === 2) {
            // let \\timeout;
        }
        return function () {
            let context = this;
            let args = arguments;
            if (type === 1) {
                let now = Date.now();
                if (now - previous > wait) {
                    func.apply(context, args);
                    previous = now;
                }
            } else if (type === 2) {
                if (!timeout) {
                    timeout = setTimeout(() => {
                        timeout = null;
                        func.apply(context, args)
                    }, wait)
                }
            }
        }
    }
 
    // call
    document.getElementById("box-debounce").addEventListener('mousemove',debounce(function(e){
        document.getElementById("box-debounce").innerHTML = e.clientX +","+e.clientY;
    },1000,true))
    // call
    document.getElementById("box-throttle").addEventListener('mousemove',throttle(function(e){
        document.getElementById("box-throttle").innerHTML = e.clientX +","+e.clientY;
    },1000,2))