Detailed analysis of JS function debouncing and throttling_Basic knowledge

This article mainly introduces the detailed analysis of JS function debouncing and throttling knowledge as well as JS code analysis. Friends who are interested in JS should read it for reference.

This article starts with the basic knowledge of the concepts of throttling and debouncing, and conducts a detailed analysis of JS functions. Let’s take a look at:

1. What is throttling? Streaming and debounce?

Throttling. Just tighten the faucet to make the water flow less, but it doesn't stop the flow. Imagine that sometimes in real life we ​​need to pick up a bucket of water. While picking up the water, we don’t want to stand there waiting all the time. We may have to leave for a while to do something else, so that the water can almost fill the bucket. When you come back again, you can't open the faucet too high, otherwise the water will be full before you come back, and a lot of water is wasted. At this time, you need to throttle down so that the water is almost full when you come back. So is there such a situation in JS? A typical scenario is lazy loading of images and monitoring the scoll event of the page, or monitoring the mousemove event of the mouse. The corresponding processing methods of these events are equivalent to water, because scroll and mousemove are used when the mouse moves. It will be triggered frequently by the browser, which will cause the corresponding events to be triggered frequently (the water flow is too fast), which will cause a lot of browser resource overhead, and a lot of intermediate processing is unnecessary. It will cause the browser to freeze. At this time, it is necessary to throttle. How to throttle? We cannot prevent the browser from triggering the corresponding event, but we can reduce the execution frequency of methods for handling events, thereby reducing the corresponding processing overhead.

Debounce. I probably first came into contact with this term in high school physics. Sometimes the switch may jitter before it is actually closed. If the jitter is obvious, the corresponding small light bulb may flash. It doesn't matter if the light bulb flashes out. , it will be troublesome if the eyes are flashed again. At this time, a debounce circuit will appear. In our page, this situation also occurs. Suppose that one of our input boxes may query the corresponding associated words in the background while inputting content. If the user inputs at the same time, input events are frequently triggered, and then frequently backwards. If the request is raised, the previous requests should be redundant until the user input is completed. Assuming that the network is slower and the data returned by the background is slower, the associated words displayed may change frequently until the last request is returned. . At this time, you can monitor whether the input is re-entered within a certain period of time. If there is no re-input, the input is considered complete and the request is sent. Otherwise, it is determined that the user is still typing and the request is not sent.

Debounce and throttling are different, because although throttling limits the intermediate processing functions, it only reduces the frequency, while debounce filters out all the intermediate processing functions and only executes the rules. The last event within the determination time.

2. JS implementation.

I’ve covered so much before, thank you for your patience in reading this. Next, let’s take a look at how to achieve throttling and debounce.

Throttling:

/** 实现思路：
  ** 参数需要一个执行的频率，和一个对应的处理函数,
  ** 内部需要一个lastTime 变量记录上一次执行的时间
  **/
  function throttle (func, wait) {
   let lastTime = null　　　　// 为了避免每次调用lastTime都被清空，利用js的闭包返回一个function确保不生命全局变量也可以
   return function () {
    let now = new Date()
    // 如果上次执行的时间和这次触发的时间大于一个执行周期，则执行
    if (now - lastTime - wait > 0) {
     func()
     lastTime = now
    }
   }
  }

Let’s see how to call:

// 由于闭包的存在，调用会不一样
let throttleRun = throttle(() => {
  console.log(123)
}, 400)
window.addEventListener('scroll', throttleRun)

At this time, if you scroll the page crazily, you will find that a 123 will be printed in 400ms. If there is no throttling, it will continue to print. You can change the wait parameter to feel the difference.

But here, our throttling method is imperfect, because our method does not obtain thisobject when the event occurs, and because our method is simple and crude by judging this The interval between the first trigger time and the last execution time determines whether to execute the callback. This will cause the last trigger to be unable to be executed, or the user's departure interval is indeed very short and cannot be executed, resulting in manslaughter, so the method needs to be improved. .

function throttle (func, wait) {
   let lastTime = null
   let timeout
   return function () {
    let context = this
    let now = new Date()
    // 如果上次执行的时间和这次触发的时间大于一个执行周期，则执行
    if (now - lastTime - wait > 0) {
     // 如果之前有了定时任务则清除
     if (timeout) {
      clearTimeout(timeout)
      timeout = null
     }
     func.apply(context, arguments)
     lastTime = now
    } else if (!timeout) {
     timeout = setTimeout(() => {
      // 改变执行上下文环境
      func.apply(context, arguments)
     }, wait)
    }
   }
  }

In this way, our method is relatively complete, and the calling method is the same as before.

Debounce:

The debounce method is consistent with throttling, but the method will only be executed after the jitter is determined to be over.

debounce (func, wait) {
   let lastTime = null
   let timeout
   return function () {
    let context = this
    let now = new Date()
    // 判定不是一次抖动
    if (now - lastTime - wait > 0) {
     setTimeout(() => {
      func.apply(context, arguments)
     }, wait)
    } else {
     if (timeout) {
      clearTimeout(timeout)
      timeout = null
     }
     timeout = setTimeout(() => {
      func.apply(context, arguments)
     }, wait)
    }
    // 注意这里lastTime是上次的触发时间
    lastTime = now
   }
  }

At this time, call it in the same way as before. You will find that no matter how crazy you scroll the window, it will only start when you stop scrolling. Execute the corresponding event.

Debounce and throttling have been implemented in many mature js, and the general idea is basically this.

Let us share with you the code of the netizen’s implementation method:

Method 1

1. The idea of ​​​​this implementation method is easy to understand: set an interval time, such as 50 milliseconds, and set the timer based on this time. When the event is triggered for the first time to the second time the event is triggered, When the interval 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); 
}

这种设计方式有一个问题：本来应该多次触发的事件，可能最终只会发生一次。具体来说，一个循序渐进的滚动事件，如果用户滚动太快速，或者程序设置的函数节流间隔时间太长，那么最终滚动事件会呈现为一个很突然的跳跃事件，中间过程都被节流截掉了。这个例子举的有点夸张了，不过使用这种方式进行节流最终是会明显感受到程序比不节流的时候“更突兀”，这对于用户体验是很差的。有一种弥补这种缺陷的设计思路。

方法二

2.第二种实现方式的思路与第一种稍有差别：设置一个间隔时间，比如50毫秒，以此时间为基准稳定分隔事件触发情况，也就是说100毫秒内连续触发多次事件，也只会按照50毫秒一次稳定分隔执行。代码如下：

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

相比于第一种方法，第二种方法也许会比第一种方法执行更多次（有时候意味着更多次请求后台，即更多的流量），但是却很好的解决了第一种方法清除中间过程的缺陷。因此在具体场景应根据情况择优决定使用哪种方法。

对于方法二，我们再提供另一种同样功能的写法：

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

以上就是本文的所有内容，希望会给大家带来帮助！！

相关推荐：

js实现仿京东快报向上滚动功能

js事件循环机制示例分析

JS如何测试目标网站的打开响应速度

The above is the detailed content of Detailed analysis of JS function debouncing and throttling_Basic knowledge. For more information, please follow other related articles on the PHP Chinese website!