防抖（debounce）& 节流（throttle）

最新推荐文章于 2025-10-09 06:20:07 发布

原创

最新推荐文章于 2025-10-09 06:20:07 发布 · 348 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端框架 #chrome #ecmascript #es6 #node.js #webpack

一、概念

作用

【防抖】和【节流】的作⽤都是防⽌某个函数被多次调⽤.

区别

假设⽤户⼀直触发某个函数，且每次触发函数的间隔⼩于期望时间【wait】，【防抖】的情况下只会调⽤【⼀次】，⽽【节流】的情况下会每隔⼀定时间【wait】调⽤函数。

PS：防抖动和节流本质是不⼀样的。防抖动是将多次执⾏变为最后⼀次执⾏，节流是将多次执⾏变成每隔⼀段时间执⾏.

二、防抖 - debounce

PS：防抖函数，返回函数连续调⽤时，空闲时间必须 >= wait，func 才会执⾏.

1. 防抖的简单实现

    /**
     * @param  {function}   func   传入的回调函数
     * @param  {number}     wait   期望时间
     * @return {function}          返回包装的函数
     * */ 
    function debounce(func, wait = 50) {
   
   
      let timer = null;
      // 利用闭包保存变量，否则函数一执行完之后，变量就被初始化
      return function (...params) {
   
   
        // 如果已经设定过定时器了就清空上⼀次的定时器
        // 否则当前函数被多次触发时，就会存在多个定时器，那么当前函数也会被多次执行
        if (timer) {
   
   
          clearTimeout(timer);
        }
        // 开始⼀个新的定时器
        timer = setTimeout(() => {
   
   
          func.apply(null, params);
        }, wait