The most complete and understandable principle, implementation and optimization of debounce and throttling

    This article introduces the application and code implementation and optimization of debounce and throttling in detail. Among them, the function throttling implements the timer version and the timestamp version, and different versions are optimized.Read it patiently, you won't regret it

    1. debounce

    1.1 Definition

    Debounce means that only when a function is not triggered again within n seconds, the function will actually be executed; if the function is triggered again within n seconds, the time will be recalculated, such as: when searching, when the user stops typing Only call the method to save request resources

    1.2 Application scenarios

    • Frequently enter content in the input box, search or submit information;
    • Click the button frequently to trigger an event;
    • Listen to the browser scroll event to complete the operation;
    • The resize event when the user zooms the browser (triggered when the size of the browser window changes)

    1.3 Implementation

    Use a third-party library underscore

    js handwritten

    <body>
      <input type="text">
       <button id="cancel">cancel</button>
 </body>

    1. Basic implementation of debounce function

         //Version 1, the basic implementation of the debounce function 
 <script>
    let count = 0;
   const inpt = document. querySelector('input');
   const foo = function (e) {
     console.log(`Send ${++count} request`, this, e);
   };

   //Basic implementation of debounce function
   function myDebounce(fn, delay) {
     // 1. Define a timer
     let timer = null;
     const _debounce = function () {
       // cancel the last timer
       if (timer) clearTimeout(timer);
       // delay execution function
       timer = setTimeout(() => {
         //Modify the fn function this point and pass parameters, otherwise this points to window and the parameter is undefined
       fn.apply(this, arguments);
       }, delay);
     };
     return_debounce;
   }

  //No debounce function is used
  // inpt.oninput = foo
    //Use debounce function
   inpt.oninput = myDebounce(foo, 800);
</script>

    No debounce function is used

    Use debounce function


    2.Optimize the debounce function: increase the effect of immediate execution 

        //Version 2, add immediate execution effect
     function myDebounce2(fn, delay, immediate = false){
       let timer = null
       let isimmediate = false
       const _debounce = function(){
            if (timer) clearTimeout(timer)
               // Determine whether to execute immediately
           if(immediate && !isimmediate){
               fn.apply(this,arguments)
               isimmediate = true
           }else{
               //Pay attention to the arrow function, otherwise this points to window
               timer = setTimeout(()=>{
                 fn.apply(this,arguments)
                 isimmediate = false
               }, delay)
           }
       }
       return_debounce
     }

    //use
    inpt.oninput = myDebounce2(foo, 500, true);

    3.Optimize the debounce function: increase the cancel effect (click the cancel button to cancel the sending request)

    function myDebounce2(fn, delay, immediate = false) {
    let timer = null;
    let isimmediate = false;
    const _debounce = function () {
      if (timer) clearTimeout(timer);
      // Determine whether to execute immediately
      if (immediate && !isimmediate) {
        fn.apply(this, arguments);
        isimmediate = true;
      } else {
        //Pay attention to the arrow function, otherwise this points to window
        timer = setTimeout(() => {
          fn.apply(this, arguments);
          isimmediate = false;
        }, delay);
      }
    };

    // Encapsulate cancel function
    _debounce. cancel = function () {
      clearTimeout(timer);
      isimmediate = false;
    };
    return_debounce;
  }
//use
 let count = 0;
  const inpt = document. querySelector('input');
  const foo = function (e, a = '123') {
    console.log(`Send ${++count} request`, this, e, a);
  };
  let debounceres = myDebounce2(foo, 800, false);
  inpt.oninput = debounceres;
  const cancelBtn = document. querySelector('#cancel');
  cancelBtn. onclick = function () {
    console.log('cancel request');
    debounceres. cancel();
  };


    2. throttling

    2.1 Definition

    Throttling means that the js method will be executed once within a certain period of time, that is, the frequency of executing the function is fixed. Similar to a bus that runs every 10 minutes, no matter how many people are waiting at the bus stop within 10 minutes, it will leave on time as soon as 10 minutes arrive

    2.2 Application scenarios

    • Monitor page scrolling events;
    • mouse move event;
    • The user frequently clicks the button to operate;
    • Some design in the game (such as how often the spaceship fires missiles)

    2.3 js implementation

    Timer version

    The throttle function of the timer version has two characteristics:
    - The first time will be executed after n seconds (the timer will not be triggered until the time is up)
    - The throttling function will be executed once after the stop is triggered (because the function is delayed, its tasks have been added to the queue when the stop is triggered, so it will be executed once after the stop)

    1. Basic implementation of throttling function

      <script>
function throttle(fn, delay){
let  flag =true
const _throttle = function(){
    if(!flag) return
    flag = false
    setTimeout(()=>{
        fn.apply(this, arguments)
        flag = true
    },delay)
}
return _throttle
}
</script>

    2. Throttling optimization: increase cancellation request and immediate execution

      //Timer version 2: cancel and execute immediately
 function throttle2(fn, delay = 500, immediate = false) {
let flag = true
let timer = null
const _throttle = function () {
    if (!flag) return
    flag = false
    if (immediate) {
        console.log('immediately');
        fn. apply(this, arguments)
        immediate = false
        flag = true
    } else{
        timer = setTimeout(() => {
        fn. apply(this, arguments)
            flag = true
           immediate = false
        }, delay)

    }
}
_throttle. cancel = function () {
    if (timer) clearTimeout(timer)
    timer = null
    flag = true
    console.log('cancel request');
}
return_throttle
}

//use
const inpt = document. querySelector("input")
const btn = document. querySelector('#cancel')
let counter = 0
const inputChange = function (event) {
console.log(`Send ${++counter} network request`, this, event)
 }
let throttleres = throttle2(inputChange, 800, true)
inpt.oninput = throttleres
btn.onclick = function () {
throttleres. cancel()
}


    Use Immediate Execution



    Timestamp version

    The timestamp version of the throttling function has two characteristics:
    - It will be executed immediately after the trigger is started (because lastTime will be assigned a value of 0);
    - It will not be executed after the trigger is stopped (because this function is a synchronous task, it will make a corresponding judgment when it is triggered, so there is no situation that it will be executed after the trigger is stopped).

    1. Basic implementation of throttling function

      //version 1: basic implementation
 function throttle(fn, interval) {
 //Record the last start time
let lastTime = 0
const _throttle = function() {
// Get the time when the current event is triggered
const nowTime = new Date(). getTime()
//Calculate whether the time interval between the  current trigger time and the last time is greater than the delay time
if (nowTime - lastTime >= interval) {
fn.apply(this,arguments);
//Retain the time of the last trigger
lastTime = nowTime;
 }
}
return_throttle
}

    2. Throttling optimization: increase cancellation request and immediate execution

      <body>   
<input type="text" />
<button id="cancel">Cancel</button>

<script>
//Version 2: Add cancellation request and whether to execute it immediately
 function throttle2(fn, interval, leading = true) {
 let lastTime = 0;
 const _throttle = function () {
 const nowTime = new Date(). getTime();

  /* lastTime = 0 when calling for the first time, if lastTime === 0 is not added, lastTime = nowTime, and remainTime will not be less than 0
  If you choose to execute immediately, there is no need to change
If you choose not to execute immediately, set lastTime = nowTime, that is, interval-0, and wait for the interval delay time to trigger */
  if (lastTime === 0 && !leading) lastTime = nowTime;

  //Triggered when the delay time is less than the interval time
  const remainTime = interval - (nowTime - lastTime);
  if (remainTime <= 0) {
    fn.apply(this, arguments);
    lastTime = nowTime;
  }
}

_throttle. cancel = function(){
    lastTime = 0
    console.log('cancel request');
}

 return_throttle
}

//use
 const inpt = document. querySelector('input');
  const btn = document. querySelector('#cancel');
  let counter = 0;
  const inputChange = function (event) {
    console.log(`Send ${++counter} request`, this, event);
  };
  let throttleres = throttle2(inputChange, 1000, false);
  inpt.oninput = throttleres;
  btn.onclick = function () {
    throttleres. cancel();
  };
</script>

    Using non-immediate execution

    3. The difference between debounce and throttling

    Similar point: The emergence of debounce throttling is to solve the problem of performance consumption caused by frequent triggering of something, so that network requests can be sent under appropriate conditions

    Difference: The difference between the two is that throttling is to do a certain thing at a fixed time, such as sending a request every n seconds; while debounce is only executed once when it is frequently triggered (the premise of both is frequent triggering )

    Popular posts from this blog

    大学资料分享——广工计院各个科目实验报告、课设及期末复习资料！！

    各位师弟师妹，我今年即将从广工毕业，因工作毕设都已差不多完成，整理资料时最终还是决定分享自己大学期间积累的各科资料。本人是广工计院一名本科生，在校绩点四年综合4.0左右，我相信这些资料对你们的学习和实验有非常大的实用性和价值。也真心希望大家能做好时间效率管理，一些不必要的课程不用浪费很多时间，把时间多留给自己所走的方向，希望各位师弟师妹好好利用我的资料，提升自己。如果本篇文章对你有帮助，请多来网站阅览并点击下页面的谷歌广告支持一下，十分感谢~~ 本博客除资源分享外还会 定期发布前端相关的行业动态、前端面试题系列等，后续也会逐步将自己的秋招总结发到谷歌博客上，同方向的师弟师妹们可以关注下，毕竟我也是在最寒冬秋招中获得好几个知名厂offer的，相信对你们将来的工作和面试也会非常实用 。 University special design: Specialised design IPV6 Experiment Report: GDUT IPV6 GDUT matlab digital signal processing experiment report: Matlab Experiment Report The latest operating system experiment and course design report: OS Experiment Report Virtualization and Cloud Computing-Hadoop Deployment Experiment Report: Hadoop Report GDUT C language programming experiment report 1-4: C language programming experiment report Summary of Physics Data of GDUT ： Physics GDUT DEA experiment + big assessment (source code, waveform diagram) + test paper information： EDA Data summary of GDUT Electrician： University Ele...
    Read more

    JAVA Traffic Signal Light Course Design (Source Code + Report + Video Demonstration)

    Image
    Table Of Contents topic details Simulate the logic of the traffic light management system at the intersection. 1. Randomly generate vehicles traveling along each route 2. Signal lights ignore yellow lights and only consider red and green lights. 3. It should be considered that vehicles turning left are controlled by signal lights, and vehicles turning right are not controlled by signal lights. 4. The specific signal light control logic is the same as that of ordinary traffic light control logic in real life, regardless of the control logic in special cases: North-south vehicles and east-west vehicles are released alternately. Vehicles waiting in the same direction should pass through vehicles first, and then vehicles turning left. 5. The time for each vehicle to pass through the intersection is 1 second (reminder: it can be simulated by thread sleep). 6. The time interval for randomly generating vehicles and the time interval for exchanging traffic lights i...
    Read more

    Win10 远程计算机或设备将不接受连接

    Image
    Table Of Contents 错误详情 当晚如平常一样开着clash，但谷歌浏览器显示此网站无法提供安全连接，按网上说的方法改https为http、清除SSL状态缓存、还原浏览器默认设置三个方法后还是没能解决，想起重启能解决99%的问题后果断重启电脑，这也是后面悲剧的开始。 电脑重启后，发现打开浏览器依然无法上网，且火狐浏览器等都出现了一样的问题，通过网络诊断得出原因：远程计算机或设备将不接受连接 百度后发现网上的解决方法千篇一律，都是通过Internet——属性——连接——局域网设置——为LAN使用代理服务器的选项去掉勾选就可恢复（也有说将所有复选框都取消勾选） 我满怀希望的尝试后发现然并卵，虽然提示网络状态已连接Internet但是上不了网。。。后来想了想，可能是因为自己用了翻墙上网然后没有退出就重启的关系（如果没用梯子的兄弟姐妹们可以先尝试我上述的方法，行不通的话再试试我后面的方法） 解决方法 可先尝试重新连接关机时使用的翻墙软件 并正常退出，即可访问网络，如果不行再按以下方法 。 非校园网 重置网络：Internet属性——高级——重置 用了科学上网的同学可能I nternet属性 的常规里主页地址会被篡改，可以手动输入成百度地址 设置完成后点确定，然后重启电脑，此时就能恢复访问了。但出错时如果是用着校园网没有退出科学上网就重启的话，此时用校园网还是上不了网，只能用手机开热点的网络上网，于是进一步摸索 校园网 1.先按非校园网方法重置网络 2.删除电脑科学上网的软件 3.重新认证校园网（可以改个密码重新登录） 呜呜，孩子终于又通网了 总结 科学上网时一定要正常进出网络，不能直接关电脑或者断网，否则IP地址还挂在外面网络回不来，所以记得科学上网时 正常退出后再重启电脑 。
    Read more