手写防抖与节流

原创已于 2022-07-04 09:13:14 修改 · 283 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #elementui

于 2021-07-05 10:13:53 首次发布

前端开发同时被 2 个专栏收录

197 篇文章

订阅专栏

面试

6 篇文章

订阅专栏

本文详细介绍了JavaScript中的防抖(debounce)和节流(throttle)技术，用于优化高频输入事件的处理。防抖技术确保在设定的时间间隔内只执行一次函数，而节流则按照固定时间间隔执行，忽略多余的触发。文中提供了具体的实现示例，帮助理解两者之间的区别和应用场景。

概念介绍

防抖：

高频输入时，定时器在时间间隔内将只执行一次函数，如果后续再次输入触发函数，将会重置这个定时间隔时间，并且延后触发

例如：间隔为500ms，在第350ms的瞬间再次触发，那么最后打印防抖成功的时间大概是350ms+500ms=850ms

节流：

高频输入时，定时器在时间间隔内将只执行一次函数，如果后续再次输入触发函数，将不会重置这个定时间隔时间，会依照每个时间间隔执行一次，

例如：间隔为500ms，在4秒内连续输入20个字符，触发20次函数（匀速，理想状态下），将只打印4s=4000ms，4000ms/500ms=8次，而如果不匀速输入，或者有其他干扰计算，则会<8次

展示例子

防抖debounce：

  function debounce(fn) {
    let timeout = null;
    // 创建一个标记用来存放定时器的返回值
    return function() {
      clearTimeout(timeout); // 每当用户输入的时候把前一个 setTimeout clear 掉
      timeout = setTimeout(() => {
        // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话，就不会执行 fn 函数
        fn.apply(this, arguments);
      }, 500);
    };
  }
  function sayHi() {
    console.log('防抖成功');
  }

<input id="inp" style={{ width: 500, height: 300, position: 'absolute' }} onInput={debounce(sayHi)} />

节流throttle：

  function throttle(fn) { 
    let canRun = true; // 通过闭包保存一个标记 
    return function () { 
      if (!canRun) return; // 在函数开头判断标记是否为true，不为true则return 
      canRun = false; // 立即设置为false 
      setTimeout(() => { // 将外部传入的函数的执行放在setTimeout中 
        fn.apply(this, arguments); // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。当定时器没有执行的时候标记永远是false，在开头被return掉 
        canRun = true; 
      }, 500); 
    }; 
  } 
  function sayHello(e) { 
    console.log('节流成功'); 
  }

<input id="inp1" style={{ width: 500, height: 500, position: 'absolute' }} onInput={throttle(sayHello)} />