Talk about function throttling in JS

The purpose of function throttling

It can be understood literally. Function throttling is used to throttle functions and optimize performance to a certain extent. For example, DOM operations are more efficient than non-DOM operations Interaction requires more memory and CPU time. Attempting to perform too many DOM-related operations in succession can cause the browser to hang and sometimes even crash. Especially using onresize in IE It is easy to happen when the event handler is used. When the browser is resized, the event will be triggered continuously. Inside the onresize event handler if you try to access the DOM operation, its high frequency of changes may crash the browser. For another example, for a common search function, we usually bind the keyup event and search every time the keyboard is pressed. But our purpose is mainly to search every time we enter some content. In order to solve these problems, you can use timers to throttle functions.

The principle of function throttling

Some codes cannot be executed continuously and repeatedly without interruption. The first time the function is called, a timer is created to run code after a specified interval. When the function is called a second time, it clears the previous timer and sets another one. If the previous timer has already been executed, this operation has no meaning. However, if the previous timer has not yet been executed, it is actually replaced with a new timer. The purpose is to execute the function only after the request to execute it has been stopped for some time.

Basic mode of function throttling

var processor = {
   timeoutId: null,
     //实际进行处理的方法
   performProcessing: function(){
     //实际执行的代码
   },
  //初始处理调用的方法
  process: function(){
    clearTimeout(this.timeoutId);
    var that = this;
    this.timeoutId = setTimeout(function(){
      that.performProcessing();
    }, 100);
  }
};
//尝试开始执行
processor.process();

Example scenario: Implementing common search functions

① Without using function throttling, bind the keyup event processing function to the input and output the content I input on the console.

Test main code:

<input id="search" type="text" name="search">

The result is as shown in the figure:

It can be seen that in this case, every time a keyboard key is pressed, it is output once. A short piece of content was output 14 times. If each time was an ajax query request, 14 requests would have been sent. The consumption in performance can be imagined.

②The case of using basic function throttling mode.

Test main code:

   
function queryData(text){
    console.log("搜索：" + text);
  }
var input = document.getElementById("search");
  input.addEventListener("keyup", function(event){ queryData(this.value);
});

The results are as shown in the figure:

It can be seen that in this case, a lot of content was input and only output once, because the interval between two inputs was set to 500ms during the test. The actual application can be set according to the situation. Obviously, this has been greatly optimized in terms of performance. However, in this case, there is a new problem, as shown below:

Okay, maybe there is no clue. In fact, the problem is that if I keep typing and input a lot of content, but the interval between each two inputs is less than the delay value I set, then the queryData search function will never be called. In fact, what we prefer is that when a certain time value is reached, this search function must be executed once. Therefore, there is an improved model of function throttling.

③Function throttling enhanced version

Main code tested:

<input id="search" type="text" name="search">

function queryData(text){
  console.log("搜索：" + text);
}
var input = document.getElementById("search");
input.addEventListener("keyup", function(event){
  throttle(queryData, null, 500, this.value);
  // queryData(this.value);
});
function throttle(fn,context,delay,text){
  clearTimeout(fn.timeoutId);
  fn.timeoutId = setTimeout(function(){
  fn.call(context,text);
  },delay);
}

The test results are as shown in the figure:

Obviously, after continuous input, after a certain time interval, the queryData function will inevitably be called, but it is not called frequently. This achieves the purpose of saving money without affecting the user experience.

④Further optimization

If you go further, you can judge the input content before calling the throttle function. If the value is empty or the value remains unchanged, there is no need to call it again. I won’t go into details here.