前端面试题（js）：手写防抖节流？

前端小白jyj

已于 2022-07-29 17:27:54 修改

阅读量578

点赞数

文章标签： javascript 面试

于 2022-07-11 21:29:45 首次发布

本文链接：https://blog.youkuaiyun.com/m0_64401231/article/details/125687096

版权

本文介绍了前端开发中常用的节流和防抖两种技术，它们分别用于限制频繁事件的执行频率和延迟触发回调。通过实例代码演示了如何在轮播图和搜索框场景中应用这两种技术，提升用户体验并优化资源消耗。

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

概念

节流：

简单理解，就像游戏里的平a，你按的再快，实际触发的普攻频率还是那么多。

当前回调未执行完，关闭节流阀，直到执行完毕，打开节流阀，执行下一次回调。

可以用在轮播图的频繁点击上。

防抖：

在事件被触发n秒后再执行回调，如果再这n秒内又被触发，则取消上一次的回调，重新执行回调。

可以用在搜索框的网络请求。

代码的简单实现：

节流：

      function throttle1(fn) {
        let flag = true;
        return function (...args) {
          if (flag) {
            flag = false;
            fn.apply(this, args);
            flag = true;
          }
        };
      }

      function throttle2(fn, delay) {
        let prev = 0;
        return function (...args) {
          let now = new Date().getTime();
          if (now - prev > delay) {
            fn.apply(this, args);
            prev = now;
          }
        };
      }

防抖：

// 接收两个参数，需要封装的函数fn，延迟时间delay
      function debounce(fn, delay) {
        // 2.声明timer，通过改变timer来判断是否开启定时器
        let timer = null;
        // 1.返回一个函数，可以使用rest参数，进行传参
        return function (...args) {
          // 4.如果timer有值，表示还在执行上一次定时器，则清除定时器，并开启新的定时器
          if (timer) {
            clearTimeout(timer);
          } else {
            // 3.当前没有定时器，则开启新的定时器
            timer = setTimeout(() => {
              fn.apply(this, args);
            }, delay);
          }
        };
      }

如有错误请指正