JS function throttling usage

This time I will bring you the use of JS function throttling. What are the precautions for using JS function throttling? . Here is a practical case, let’s take a look.

Function throttling (throttle)

Function throttling is to schedule a function to be executed only when it is greater than or equal to the execution cycle, and calls within the cycle will not be executed. It's like a drop of water will fall after it accumulates to a certain weight.

Scenario:

Window resize (resize)

Page scroll (scroll)

Rush to buy crazy clicks (mousedown)

Implementation:

function throttle(method, delay){    var last = 0;    return function (){        var now = +new Date();        if(now - last > delay){
            method.apply(this,arguments);
            last = now;
        }
    }
}document.getElementById('throttle').onclick = throttle(function(){console.log('click')},2000);

underscore implementation:

_.throttle = function(func, wait, options) {    var context, args, result;    var timeout = null;    var previous = 0;    if (!options) options = {};    var later = function() {
        previous = options.leading === false ? 0 : _.now();
        timeout = null;
        result = func.apply(context, args);        if (!timeout) context = args = null;
    };    return function() {        var now = _.now();        if (!previous && options.leading === false) previous = now;        //计算剩余时间
        var remaining = wait - (now - previous);
        context = this;
        args = arguments;        //剩余时间小于等于0或者剩余时间大于等待时间(本地时间变动出现)
        if (remaining <= 0 || remaining > wait) {            if (timeout) {
                clearTimeout(timeout);
                timeout = null;
            }
            previous = now;
            result = func.apply(context, args);            if (!timeout) context = args = null;
        } else if (!timeout && options.trailing !== false) {
            timeout = setTimeout(later, remaining);
        }        return result;
    };
};

Function debounce (debounce)

Function debounce means that when a function needs to be triggered frequently, it will only be executed once when there is enough free time. . It seems like the bus driver waits for everyone to get on the bus before exiting the bus.

Scenario:

Real-timeSearch(keyup)

Drag and drop(mousemove)

Implementation:

function debounce(method, delay){    var timer = null;    return function(){        var context = this,args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function(){
            method.apply(context, args);
        },delay);
    }
}document.getElementById('debounce').onclick = debounce(function(){console.log('click')},2000);

underscore implementation:

_.debounce = function(func, wait, immediate) {    var timeout, args, context, timestamp, result;    var later = function() {        var last = _.now() - timestamp;        if (last < wait && last >= 0) {
            timeout = setTimeout(later, wait - last);
        } else {
            timeout = null;            if (!immediate) {
                result = func.apply(context, args);                if (!timeout) context = args = null;
            }
        }
    };    return function() {
        context = this;
        args = arguments;
        timestamp = _.now();        var callNow = immediate && !timeout;        if (!timeout) timeout = setTimeout(later, wait);        if (callNow) {
            result = func.apply(context, args);
            context = args = null;
        }        return result;
    };
};

Function throttling (throttle) and function debounce (debounce) are both methods to improve performance by delaying logical operations. They are common and important solutions in front-end optimization. You can understand the difference between the two from concepts and practical applications, and choose the appropriate method when needed.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to the php Chinese website Other related articles!

Recommended reading:

Use JS code to create barrage effects

Use H5 canvas to create barrage effects

The above is the detailed content of JS function throttling usage. For more information, please follow other related articles on the PHP Chinese website!