Detailed analysis of JS function debouncing and throttling (graphic tutorial)

This article mainly introduces the detailed analysis of JS function debouncing and throttling related knowledge and code analysis. Friends who need it can refer to it.

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 water 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 the methods that handle the event, thereby reducing the corresponding processing overhead.

Debounce. I probably first came across 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 damaged 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 to input again within a certain period of time. If there is no input again, it will be considered that the input is completed and the request will be sent. Otherwise, it will be judged that the user is still typing and the request will not be 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 look at how to call:

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

At this time, if f scrolls the page crazily, you will find that a 123 will be printed in 400ms, but without throttling, it will Print continuously, you can change the wait parameter to feel the difference.

But up to this point, our throttling method is imperfect because our method does not obtain the this object when the event occurs, and because our method simply and crudely determines the time and date of the trigger. The interval between execution times is used to determine 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, the corresponding event will only be executed when you stop scrolling.

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

Let’s 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 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 there is no repeated trigger within 50 milliseconds after an event is triggered. code show as below:

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内加载jquery.js方法详解

JS同步、异步与延迟加载实现总结

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