Detailed explanation of JavaScript function throttling

The browser has only one UI thread for a web page. It will also handle the rendering of the interface and the execution of the JavaScript code on the page (to briefly expand, the browser or JavaScript running environment does not It is not single-threaded. Things such as ajax asynchronous callbacks, native communication within the hybrid framework, event queues, CSS running threads, etc. are all multi-threaded environments. However, ES6 introduced the Promise class to reduce some asynchronous situations). Therefore, when JavaScript code runs a method that requires a lot of calculations, it may block the UI thread, which may cause the user's response to freeze. In severe cases, the browser will prompt whether the page is unresponsive and whether to force it to close. For example, page scroll events of web pages, sliding and zoom events of mobile devices, etc. Even if there are no serious performance problems, we should offload the large-scale processing time that will be triggered multiple times in a short period of time from the perspective of performance optimization.

How to effectively prevent the UI thread from running too long code is a problem that all user interactive applications need to consider. For the same problem, on the client Android, you can use the UI main thread to open child threads to disperse calculations. Correspondingly, js can also disperse calculations by introducing webWorker, but there is a simpler and more effective method in js: function throttling. The core technique for using function throttling is to use timers for segmented calculations. There are roughly two ideas for specific implementation methods.

·Method 1

1. The idea of ​​​​this implementation method is easy to understand: set an interval, such as 50 milliseconds, and set the timer based on this time. When the first time When the interval between the trigger event and the second trigger event is less than 50 milliseconds, clear this timer and set a new timer, and so on until there is no repeated trigger within 50 milliseconds after an event is triggered. The code is as follows:

function debounce(method){
   clearTimeout(method.timer);
   method.timer=setTimeout(function(){
      method();
   },50);
}

There is a problem with this design method: an event that should be triggered multiple times may end up happening only once. Specifically, for a gradual scrolling event, if the user scrolls too fast, or the function throttling interval set by the program is too long, the final scrolling event will appear as a sudden jump event, and the intermediate process will be cut off by throttling. . This example is a bit exaggerated, but if you use this method to throttle, you will eventually feel that the program is "more abrupt" than when it is not throttled, which is very poor for the user experience. There is a design idea to make up for this shortcoming.

·Method 2

2. The idea of ​​the second implementation method is slightly different from the first one: Set an interval time, such as 50 milliseconds, to stably separate event triggers based on this time. That is to say, if multiple events are triggered continuously within 100 milliseconds, they will only be executed in a stable separation of 50 milliseconds. The code is as follows:

var oldTime=new Date().getTime();
var delay=50;
function throttle1(method){
   var curTime=new Date().getTime();
   if(curTime-oldTime>=delay){
      oldTime=curTime;
      method();
   }
}

Compared to the first method, the second method may be executed more times than the first method (sometimes it means more times Requesting the background, that is, more traffic), but it solves the shortcomings of the first method to clear the intermediate process. Therefore, in specific scenarios, the method to be used should be decided based on the situation.

For method two, we provide another way to write the same function:

var timer=undefined,delay=50;
function throttle2(method){
    if(timer){
        return ;
    }
    method();
    timer=setTimeout(function(){
        timer=undefined;
    },delay);
}

Finally, let’s talk about the name of function throttling. The problem is that you often see the two method names throttle and debounce. Throttle can be translated as "control, stuck", and debounce can be translated as "anti-bounce". In "JavaScript Advanced Programming", the author introduced method one, and the author used the function name "throttle". In the book "Third-Party JavaScript Programming", both method one and method two appear. The author named method one "debounce" and method two "throttle". When introducing two methods at the same time, some articles in China mistakenly name method one as "throttle" and method two as "debounce", which is very irresponsible from an English perspective. So here we put things right: method one can be understood as "anti-bounce" and should be named "debounce"; method two can be understood as "function throttling" and should be named "throttle".

The above is a detailed explanation of JavaScript function throttling. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!