聊聊面试中常见的代码实现：节流和防抖

前端

2023-06-19 17:48:03

节流和防抖：面试中的代码实现指南

什么是节流？

想象一下一个在繁忙十字路口的交通信号灯。如果信号灯在每次汽车经过时都变绿，交通就会混乱不堪。为了提高交通流量，我们使用节流机制，即在一定时间间隔内只允许一批车辆通行。这可以有效减少拥堵，优化交通流。

在编程中，节流也遵循类似的原理。它允许一个函数在给定的时间窗口内只执行一次，即使该函数在窗口内被多次调用。这对于需要限制函数调用的频率以提高性能或防止过度消耗资源的场景非常有用。

如何实现节流？

实现节流的一种常见方法是使用定时器。当函数首次被调用时，我们启动一个定时器，在指定的延迟时间后执行该函数。如果在延迟时间内函数再次被调用，则取消先前的定时器并启动一个新的定时器。这样，函数只会在最后一个调用发生后的延迟时间后执行。

什么是防抖？

防抖是一种类似于节流的技术，但它有一个微妙的区别。防抖允许一个函数在给定的时间窗口内执行多次，但是只有最后一个调用才会真正执行。这对于需要在用户输入稳定后才执行函数的场景非常有用，例如在搜索框中输入查询时。

如何实现防抖？

实现防抖的一种简单方法是使用定时器和取消功能。当函数首次被调用时，我们启动一个定时器，在指定的延迟时间后执行该函数。如果在延迟时间内函数再次被调用，则取消先前的定时器并启动一个新的定时器。这样，函数只会在最后一个调用发生后的延迟时间后执行。

代码示例

为了更好地理解节流和防抖，让我们来看看一些代码示例：

节流函数：

const throttle = (fn, delay) => {
  let timerId = null;
  return function () {
    const args = arguments;
    const context = this;
    if (!timerId) {
      timerId = setTimeout(() => {
        fn.apply(context, args);
        timerId = null;
      }, delay);
    }
  };
};

防抖函数：

const debounce = (fn, delay) => {
  let timerId = null;
  return function () {
    const args = arguments;
    const context = this;
    clearTimeout(timerId);
    timerId = setTimeout(() => {
      fn.apply(context, args);
    }, delay);
  };
};