Detailed explanation of JavaScript function throttling and detailed explanation of method examples

This article mainly introduces JavaScript Detailed explanation of function throttling and related information with examples. Friends in need can refer to

Detailed explanation of JavaScript function throttling

The browser has only one UI thread for a web page, which 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 is not single-threaded, such as ajax asynchronous callback, The hybrid framework's native communication, event queue, CSS running thread, etc. are all multi-threaded environments, but 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 also 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 an issue that all user interactive applications need to consider. The same problem can be solved using the UI main thread on the client sideAndroid Threads to spread out computation. Correspondingly, js can also disperse calculations by introducing webWorker, but there is a simpler and more effective method in js: function throttling. Using functionsThe core technique of throttling is to use TimerSegmented calculation. There are roughly two ideas for specific implementation methods.

·Method 1

1. The idea of ​​​​this implementation is easy to understand: set an interval, such as 50 milliseconds, to This time is used as a baseline to set the timer. When the interval between the first trigger event and the second trigger event is less than 50 milliseconds, clear this timer and set a new timer, and so on until 50 milliseconds after an event is triggered. There are no retriggers within milliseconds. 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 second implementation method is slightly different from the first one: set an interval, such as 50 milliseconds, This time is used as a basis to stably separate event triggering situations. 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 requests to the background, that is, more traffic) , but it solves the defects of the first method to clear the intermediate process very well. Therefore, in specific scenarios, the method to be used should be decided based on the situation.

For method two, we provide another way of writing 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, which everyone will often see. Regarding the two method names of 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 the detailed content of Detailed explanation of JavaScript function throttling and detailed explanation of method examples. For more information, please follow other related articles on the PHP Chinese website!