Detailed explanation of the steps for using function throttling and time-sharing functions

This time I will bring you a detailed explanation of the steps for using function throttling and time-sharing functions. What are the precautions for using function throttling and time-sharing functions? The following is a practical case, let's take a look.

The problems of time-sharing functions and function throttling are different. The events targeted by function throttling are not actively called by users, as has been mentioned before.

The principle of function throttling is to delay the execution of the current function. If the delay has not been completed, then the next request for the function is ignored. This means that many function requests will be ignored.

In some development scenarios, we may inject thousands of nodes into the document at one time. Adding a large number of DOM nodes to the browser in a short period of time may be too much for the browser, and the result will often be that the browser freezes. One of the solutions is to use the time-sharing function (timeChunk).

timeChunk time-sharing function allows the creation of nodes to be done in batches. For example, if 1,000 nodes are created in one second, 10 nodes will be created every 200ms. The specific timeChunk function is encapsulated as follows:

function timeChunk( arr, fn, count){//arr 数组 fn操作函数 count每次操作数量
  var obj,
    t;
  var start = function(){
    var len = Math.min(count||1,arr.length);
    for(var i=0; i < len; i++){
      obj = arr.shift();
      fn(obj)
    }
  };
  return function(interval){
    t = setInterval(function(){
      if(arr.length==0){
        return clearInterval(t)
      };
      start();
    },interval||200)
  }
}

Application:

If we want to add 1000 nodes to the document, we can use the timeChunk time-sharing function to continuously add 20 nodes every 200ms. node.

var arr = [];
for(var i = 1; i <= 1000; i++){
  arr.push(i)
}
var renderLists = timeChunk(arr,function(i){
  var p = document.createElement('p');
  p.innerHTML = i;
  document.body.appendChild(p);
},20);
renderLists(200);

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Angular server-side rendering method summary

Convert the html string to HTML tags and use

The above is the detailed content of Detailed explanation of the steps for using function throttling and time-sharing functions. For more information, please follow other related articles on the PHP Chinese website!