Detailed introduction to anti-shake throttling in JavaScript (code example)

This article brings you a detailed introduction (code example) about anti-shake throttling in JavaScript. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Function throttling and function anti-shake are both a means of optimizing high-frequency execution of js code.

Function throttling (throttle) and function debounce (debounce) are both used to limit the execution frequency of the function to optimize the response speed caused by the function trigger frequency being too high to keep up with the trigger frequency, resulting in delays, suspended animation or The phenomenon of lag.

Function throttling (throttle)

Function throttling means that an operation performed within a certain period of time is only performed once, that is to say, an execution cycle is set in advance. When the moment when the action is called is greater than or equal to the execution cycle, the action is executed and then enters the next new cycle. A more vivid example is if you tighten the faucet until the water flows out in the form of drops, then you will find that every once in a while, A drop of water will come out.

function debounce(fn, wait) {   
    var timeout = null;   
    return function() {       
        if(timeout !== null) clearTimeout(timeout);       
        timeout = setTimeout(fn, wait);   
    }
}
// 处理函数
function handle() {   
    console.log(Math.random());
}
// 滚动事件
window.addEventListener('scroll', debounce(handle, 1000));

Function debounce (debounce)

Function debounce means that within a certain period of time, when the action is continuously and frequently triggered, the action will only be executed. Once, that is to say, the action will be executed only after n milliseconds have elapsed since the action was called. If this action is called again within these n milliseconds, the execution time will be recalculated, so continuous actions in a short period of time will only be triggered once, for example Say you keep your finger on a spring and it won't spring up until you let go.

Timestamp

var throttle = function(func, delay) {           
    var prev = Date.now();           
    return function() {               
        var context = this;               
        var args = arguments;               
        var now = Date.now();               
        if (now - prev >= delay) {                   
            func.apply(context, args);                   
            prev = Date.now();               
        }           
    }       
}       
function handle() {           
    console.log(Math.random());       
}       
window.addEventListener('scroll', throttle(handle, 1000));

Timer

var throttle = function(func, delay) {
    var timer = null;
    return function() {
        var context = this;
        var args = arguments;
        if (!timer) {
            timer = setTimeout(function() {
                func.apply(context, args);
                timer = null;
            }, delay);
        }
    }
}
function handle() {
    console.log(Math.random());
}
window.addEventListener('scroll', throttle(handle, 1000));

The above is the detailed content of Detailed introduction to anti-shake throttling in JavaScript (code example). For more information, please follow other related articles on the PHP Chinese website!