Jitter prevention and throttling of native JavaScript implementation functions

Keywords: PHP Javascript

Jitter prevention and throttling of native JavaScript implementation functions

Reference: https://www.jianshu.com/p/c8b86b09daf0

I want to know more about the link on the direct stamp. It's very clear. Below is just the code and my own comments to help understand the logic behind the implementation.

Debounce (anti shake)

The so-called anti shake means that the function can only be executed once in n seconds after the event is triggered. If the event is triggered again in n seconds, the function execution time will be recalculated.

/**
 * @desc Function anti shake
 * @param func function
 * @param wait Delay execution milliseconds
 * @param immediate true Table immediate execution (leading edge trigger), false table non immediate execution (trailing edge trigger)
 */
function debounce(func,wait,immediate) {
    let timeout;

    return function () {
        let context = this;
        let args = arguments;

        if (timeout) clearTimeout(timeout); // Timeout is the timer ID, which will not be executed until it is triggered for the first time in the initialization state. If db function is triggered later in the cycle, the timer will be cleared to avoid the event function being executed due to timeout initialization in the cycle.
        if (immediate) {
            var callNow = !timeout;
            timeout = setTimeout(() => {
                timeout = null; // Reinitialize timeout if db function is not triggered in the cycle
            }, wait)
            if (callNow) func.apply(context, args) // In the initialization state, execute the event function immediately
        }
        else {
            timeout = setTimeout(function(){ // When the db function is triggered in the cycle, the timer will be updated and the execution of the event function will be delayed.
                func.apply(context, args)
            }, wait);
        }
    }
}

Throttle

The so-called throttling refers to the continuous triggering of events but the execution of functions only once in n seconds. Throttling dilutes the frequency of function execution.

/**
 * @desc Function throttling
 * @param func function
 * @param wait Delay execution milliseconds
 * @param type 1 Table time stamp Version (leading edge trigger), table 2 timer Version (trailing edge trigger)
 */
function throttle(func, wait ,type) {
    if(type===1){
        let 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) { // In the initial state, the event function is executed once, and the current time stamp is used as the time starting point. In the future, only when the time passed is greater than one cycle, the th function will update the time starting point and execute the event function.
                func.apply(context, args);
                previous = now;
            }
        }else if(type===2){
            if (!timeout) { // The timer is set in the initial state, and can be reset only after the timer is executed (execution time function + initialization state)
                timeout = setTimeout(() => {
                    timeout = null;
                    func.apply(context, args)
                }, wait)
            }
        }
    }
}

Posted by solaris77 on Sat, 19 Oct 2019 14:08:26 -0700