Optimizing the performance of a function expansion

Throttle function is another common means of optimizing the high frequency of the calling function, the function of the core is optimized for high-frequency calls to be executed in a time-frequency
function of the throttle and anti-shake function difference is that:

Anti-shake function is a function call within the interval between two successive detected before and after multiple calls in and combined into a time interval;

Throttle function is frequently weakened as a function call in accordance with a certain time interval to call.

The specific implementation may be divided into two types, namely, a time stamp and a timer implemented to achieve

Timer realization

When the function call, first check whether there is a timer, if there is to wait for the completion of the timer, or create a new timer to deal with.

According to this idea, it is possible to obtain substantially the following code:

function throttleByTimer(cb, wait) {
    let timer = null;
    return function() {
        if(timer) return;
        timer = setTimeout(() => {
            cb.apply(this, arguments);
            timer = null;
        }, wait);
    }
}

Timestamp achieve

When the function is called, a time stamp with the current timestamp and the last execution completed comparison, when the waiting time interval, the function call is ignoring the times, otherwise the callback and record the time stamp.

function throttleByTimeStamp(cb, wait) {
    let preTimeStamp = +new Date();
    return function() {
        let nowTimeStamp = +new Date();
        if (nowTimeStamp - preTimeStamp < wait) return;
        cb.apply(this, arguments);
        preTimeStamp = nowTimeStamp;
    }
}

Comparison of two ways can be found to achieve the first timer can not be executed immediately, and although you can achieve the timestamp of the first execution immediately, but certainly not ensure the implementation of the last callback. The actual business development, in order to ensure the accuracy of the results, often need to make sure the last callback execution.

Therefore, it can be optimized, the final version follows

function throttle(cb, wait) {
    let preTimeStamp = 0;
    let timer = null;

    return function() {
        let nowTimeStamp = +new Date();
        let difTimeStamp = nowTimeStamp - preTimeStamp;

        if (difTimeStamp < wait) {
            if (timer) return;
            timer = setTimeout(() => {
                cb.apply(this, arguments);
                timer = null;
                preTimeStamp = +new Date();
            }, wait - difTimeStamp);
            return;
        }

        clearTimeout(timer);
        timer = null;

        cb.apply(this, arguments);
        preTimeStamp = nowTimeStamp;
    }
}

Use:

timerPDom.onmousemove = throttle(move, 1000);

Scenarios

Event mousemove, scroll and other frequent trigger of listening

Rolling load

Other functions such as frequent calls

to sum up

Optimization function may be likened to a throttled constantly dripping from the tap every time interval to a drop of water process, it is possible to collect waste water the water is not

Timers throttle, due to the characteristics of the timer, the first time can not be executed immediately, but will certainly ensure the implementation of the last

Timestamp throttling, for the first time can be executed immediately, but will be unable to ensure the implementation of the last

Both methods have their own flaws single implementation, practical application need to integrate with
Optimizing the performance of a function expansion
articles from the public number: Rui Jiang cloud computing

Rui Jiang Yunguan website link: https://www.eflycloud.com/home?from=RJ0024