当前位置:网站首页>Anti chattering and throttling mode

Anti chattering and throttling mode

2020-12-07 12:39:59 WindrunnerMax

Anti shake throttle mode

Shake proof debounce And throttling throttle They are all ways to control the execution frequency of event handling functions , When the function does DOM Operate or have behavior such as request server and act as a high frequency event such as onscroll When the event handler is triggered , We need to control the execution frequency of event handling function , Otherwise, it will cause a lot of resource waste, resulting in performance degradation , Of course, both anti chattering and throttling do not substantially reduce the number of events triggered , Instead, it improves performance by reducing the number of times an event handler executes . To be exact, the anti chattering and throttling mode does not belong to the category of design patterns commonly defined , But they are a very useful code building technique .

Anti shake mode

Not immediately anti shake

When the event continues to trigger , Event handling functions are not executed at all , After a period of time when the last trigger ends , To perform . The most common example is the search suggestion function , When the user enters continuously , It doesn't ask the server to calculate the search suggestions , Until the user input is completed N It takes MS to transfer the data to the back end and return search suggestions .
Realize the idea : Each time an event is triggered, the previous delay call method is cancelled and the timer is reset .

function debounce(wait, funct, ...args){
    var timer = null;
    return () => {
        clearTimeout(timer);
        timer = setTimeout(() => funct(...args), wait);
    }
}

window.onscroll = debounce(300, (a) => console.log(a), 1);

Shake off immediately

When the event continues to trigger , The event handler is executed immediately , Then the event handler is no longer executed , It is not allowed to execute the event handler again until some time after the last event was triggered .
Realize the idea : Determine if there is a timer , If not, the event handler is executed , Then you need to reset the timer whether or not it already exists .

function debounce(wait, funct, ...args){
    var timer = null;
    return () => {
        if(!timer)  funct(...args);
        clearTimeout(timer);
        timer = setTimeout(() => timer = null, wait);
    }
}

window.onscroll = debounce(300, (a) => console.log(a), 1);

Throttling mode

When the event continues to trigger , Throttling can dilute the frequency of event handling functions , Suppose that 1s Inside onmousemove The event triggered 100 Time , By throttling, you can make onmousemove Each event of the function 100ms Trigger once , That is to say 1s Inside onmousemove The event handler of the event only executes 10 Time .

Timestamp implementation

Realize the idea : Record the execution time of the last event handler by timestamp , When the event is triggered, if the time difference is greater than the execution cycle, the event handling function is executed and the execution time is assigned as the current timestamp .

function throttle(wait, funct, ...args){
    var previous = 0;
    return () => {
        var now = +new Date();
        if(now - previous > wait){
            funct(...args);
            previous = now;
        }
    }
}

window.onscroll = throttle(1000, (a) => console.log(a), 1);

Timer implementation

Realize the idea : Determine if there is a timer , If not, the event handler is executed and the timer is reset .

function throttle(wait, funct, ...args){
    var timer = null;
    return () => {
        if(!timer){
            funct(...args);
            timer = setTimeout(() => timer = null, wait);
        }  
    }
}

window.onscroll = throttle(1000, (a) => console.log(a), 1);

A daily topic

https://github.com/WindrunnerMax/EveryDay

Reference resources

https://www.jianshu.com/p/566c66aafa22
https://github.com/mqyqingfeng/Blog/issues/22
https://github.com/mqyqingfeng/Blog/issues/26

版权声明
本文为[WindrunnerMax]所创,转载请带上原文链接,感谢
https://chowdera.com/2020/12/20201207123635983m.html