Implementation principles of Debounce function and Throttle function

This article mainly introduces the implementation principles of Debounce function and Throttle function. It has certain reference value. Now I share it with everyone. Friends in need can refer to

The principles and implementation of Debounce and Throttle.

• Throttle and debounce are both methods to improve the running performance of the event processing function by reducing the execution of the actual logic processing process. Throttle does not substantially reduce the number of event triggers. The two are indeed confusing in terms of conceptual understanding.

• #debounce forces the function to be executed only once within a certain period of time, while throttle forces the function to execute at a fixed rate. implement. They can greatly improve the user experience when dealing with some frequently triggered DOM events.

When dealing with events such as resize, scroll, mousemove and keydown/keyup/keypress, usually we don’t want these events to be triggered too frequently, especially the listener program It involves a lot of calculations or very resource-consuming operations.

How often? Take mousemove as an example. According to DOM Level 3 regulations, "If the mouse moves continuously, the browser should trigger multiple consecutive mousemove events." This means that the browser will trigger multiple consecutive mousemove events based on the user's behavior if its internal timer allows. The speed of moving the mouse to trigger the mousemove event. (Of course, if you move the mouse fast enough, such as "swiping" it, the browser will not trigger this event). Events such as resize, scroll, and key* are similar.

1. What the debounce function does is to force a function to be executed only once within a certain continuous period of time, even if it would have been called multiple times. We hope that the corresponding listening function will be executed after the user stops an operation for a period of time, instead of executing the listening function as many times as the browser triggers the event during the user's operation.

function debounce(fn, delay) {

  // 定时器，用来 setTimeout
  var timer

  // 返回一个函数，这个函数会在一个时间区间结束后的 delay 毫秒时执行 fn 函数
  return function () {

    // 保存函数调用时的上下文和参数，传递给 fn
    var context = this
    var args = arguments

    // 每次这个返回的函数被调用，就清除定时器，以保证不执行 fn
    clearTimeout(timer)

    // 当返回的函数被最后一次调用后（也就是用户停止了某个连续的操作），
    // 再过 delay 毫秒就执行 fn
    timer = setTimeout(function () {
      fn.apply(context, args)
    }, delay)
  }
}

debounce returns a closure. This closure will still be called continuously and frequently, but inside the closure, it limits the execution of the original function fn, forcing fn to only stop during continuous operations. Only executed once.

Throttle

The concept of throttle is easier to understand, which is to fix the rate at which a function is executed, which is the so-called "throttle". Normal

/**
*
* @param fn {Function}   实际要执行的函数
* @param delay {Number}  执行间隔，单位是毫秒（ms）
*
* @return {Function}     返回一个“节流”函数
*/

function throttle(fn, threshhold) {

  // 记录上次执行的时间
  var last

  // 定时器
  var timer

  // 默认间隔为 250ms
  threshhold || (threshhold = 250)

  // 返回的函数，每过 threshhold 毫秒就执行一次 fn 函数
  return function () {

    // 保存函数调用时的上下文和参数，传递给 fn
    var context = this
    var args = arguments

    var now = +new Date()

    // 如果距离上次执行 fn 函数的时间小于 threshhold，那么就放弃
    // 执行 fn，并重新计时
    if (last && now <p> After the two are applied, the efficiency will be directly brought about. If you still can't fully understand the difference between debounce and throttle, you can go to this page to see a visual comparison of the two. <br><img src="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/571/717/740/1531471276493544.png?x-oss-process=image/resize,p_40" class="lazy" title="1531471276493544.png" alt="Implementation principles of Debounce function and Throttle function"></p><p>The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website! </p><p>Related recommendations: </p><p class="comments-box-content"></p><p class="mt20 ad-detail-mm hidden-xs"><a title="对于JavaScript中的函数重载的说明" href="http://www.php.cn/js-tutorial-406490.html" target="_blank">Instructions on function overloading in JavaScript</a><br></p><p class="mt20 ad-detail-mm hidden-xs"><a title="利用JavaScript中发出HTTP请求的方法" href="http://www.php.cn/js-tutorial-406487.html" target="_blank">Using JavaScript Methods for making HTTP requests</a><br></p>

The above is the detailed content of Implementation principles of Debounce function and Throttle function. For more information, please follow other related articles on the PHP Chinese website!