JS 手写防抖和节流

欢莱

已于 2022-09-16 11:23:26 修改

阅读量445

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端面试 JS进阶文章标签： javascript 前端面试

于 2022-09-09 16:06:18 首次发布

本文链接：https://blog.csdn.net/RR_chen/article/details/126389274

前端面试同时被 2 个专栏收录

6 篇文章

订阅专栏

JS进阶

6 篇文章

订阅专栏

本文深入探讨了JavaScript中的防抖(debounce)和节流(throttle)技术，这两种技术常用于优化事件处理，特别是对于高频触发的场景如搜索框输入和表单验证。防抖确保在特定时间段内只执行最后一次触发的回调，而节流则保证在单位时间内只执行一次回调。通过示例代码展示了如何实现防抖和节流，并推荐使用Lodash库来简化这一过程。了解并合理运用这些技术可以显著提升用户体验和性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

防抖

原理：

防抖（debounce）：在时间 n 秒内多次触发事件，则以最后一次触发开始， n 秒后才会执行事件的回调函数。

应用场景：

搜索框，输入后1000毫秒搜索

debounce(fetchSelectData, 300);

表单验证，输入1000毫秒后验证

debounce(validator, 1000);

实现防抖：

let input = document.getElementsByTagName("input")[0];

let getUserAction = () => {
  console.log(new Date());
};

function debounce(func, time) {
  let timer = null;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args);
    }, time);
  };
}

input.addEventListener("keyup", debounce(getUserAction, 1000));

想让回调函数立即执行一次

function debounce(func, time, flag) {
  let timer = null;
  return function (...args) {
    clearTimeout(timer);
    // flag 标志是否立即执行。
    // 当timer为null时表示函数是第一次执行，我们立即执行一次它。
    if (flag && !timer) {
      func.apply(this, args);
    }
    timer = setTimeout(() => {
      func.apply(this, args);
    }, time);
  };
}

节流

定义：

节流（throttle）：在单位时间内只执行一次回调函数，而在单位时间内多次触发还是只能执行一次。

实现：

1. 时间戳方式实现：

第一次触发事件，回调函数执行，而最后一次不会执行。

function throttle(func, time) {
  let pre = 0;
  return function (...args) {
    if (Date.now() - pre > time) {
      pre = Date.now();
      func.apply(this, args);
    }
  };
}

2. 定时器方式实现：

第一次触发事件回调函数不执行，而最后一次执行。

function throttle(func, time) {
  let timer = null;
  return function (...args) {
    if (!timer) {
      timer = setTimeout(() => {
        timer = null;
        func.apply(this, args);
      }, time);
    }
  };
}

项目使用 Lodash 库更加方便

debounce

具体查看官网 https://lodash.com/docs/4.17.15#debounce

let debounced = _.debounce(func, [wait=0], [options={}])
debounced()

参数：
func (Function) : 去抖动的函数。
[wait=0] (number) : 延迟的毫秒数。
[options={}] (Object) : 选项对象。

返回值：
(Function) : 返回新的去抖动函数。

throttle

具体查看官网 https://lodash.com/docs/4.17.15#throttle

let throttled =  _.throttle(func, [wait=0], [options={}])
throttled()

参数：
func (Function) : 要节流的函数。
[wait=0] (number) : 限制调用的毫秒数。
[options={}] (Object) : 选项对象。

返回值：
(Function) : 返回新的节流函数。