JS function throttling usage-JS Tutorial-php.cn

JS function throttling usage

php中世界最好的语言

Release： 2018-03-13 17:25:27

Original

1570 people have browsed it

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(&#39;throttle&#39;).onclick = throttle(function(){console.log(&#39;click&#39;)},2000);

Copy after login

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;
    };
};

Copy after login

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(&#39;debounce&#39;).onclick = debounce(function(){console.log(&#39;click&#39;)},2000);

Copy after login

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;
    };
};

Copy after login

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!