小试牛刀：深入解析 JS 中的防抖与节流函数，轻松实现调用频率限制！

2024-02-17 21:31:29

滚动的滑动条是否让你觉得眼花缭乱？鼠标在屏幕上飞舞是否让你应接不暇？当我们在编写JS应用时，为了优化用户体验，需要对srcoll、mousemove这类事件进行调用次数的限制。对此我们就可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率。

防抖：优雅地处理延迟调用

防抖函数可以确保某个函数在一定时间内只调用一次。这对于一些需要一定时间才能完成的事件，例如文本输入或滚动条滑动，非常有用。防抖函数会延迟函数的执行，直到达到设定的时间间隔。

节流：平滑地控制调用频率

节流函数可以确保某个函数在一定时间内只调用一次。这对于一些需要频繁调用的事件，例如鼠标移动或窗口调整大小，非常有用。节流函数会限制函数的执行频率，即使在触发事件的间隔时间内多次调用函数，它也会在设定的时间间隔内只执行一次。

何时使用防抖？何时使用节流？

防抖和节流函数都有其独特的应用场景。通常情况下，防抖函数适用于需要一定时间才能完成的事件，例如文本输入或滚动条滑动。而节流函数适用于需要频繁调用的事件，例如鼠标移动或窗口调整大小。

实现防抖和节流函数

实现防抖和节流函数有很多方法。以下是用 JavaScript 实现的简单示例：

// 防抖函数
function debounce(func, wait) {
  let timeout;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(context, args);
    }, wait);
  };
}

// 节流函数
function throttle(func, wait) {
  let lastCall = 0;
  return function() {
    const context = this;
    const args = arguments;
    const now = Date.now();
    if (now - lastCall >= wait) {
      func.apply(context, args);
      lastCall = now;
    }
  };
}