debounce与throttle：深入理解节流与去抖动

2023-11-26 21:04:09

如今，debounce和throttle是前端开发中经常会被问到的一道JavaScript面试题。debounce（去抖动）和throttle（节流）都是用来限制函数的执行频率，从而提高性能的两种技术。本文将深入解析两者的原理、异同，并提供应用场景和代码示例，帮助您掌握这些技术，提升前端开发技能。

什么是debounce？

debounce（去抖动）是一种函数节流技术，它会在一定时间内只执行一次函数。如果在规定时间内函数被调用多次，那么只有最后一次调用的结果会被执行。

举个例子，假设我们有一个函数，当用户在输入框中输入内容时，它会发送一个请求来获取建议。如果用户输入的速度很快，那么函数可能会被调用多次。使用debounce技术，我们可以限制函数的执行频率，比如每500毫秒只执行一次。这样，即使用户输入的速度很快，函数也不会被多次调用，从而减少了对服务器的请求次数，提高了性能。

什么是throttle？

throttle（节流）也是一种函数节流技术，但它与debounce不同。throttle会在一定时间间隔内只执行一次函数。如果在规定时间内函数被调用多次，那么只有第一次调用的结果会被执行，后面的调用都会被忽略。

举个例子，假设我们有一个函数，当用户滚动页面时，它会加载更多的内容。如果用户滚动页面很快，那么函数可能会被调用多次。使用throttle技术，我们可以限制函数的执行频率，比如每500毫秒只执行一次。这样，即使用户滚动页面很快，函数也不会被多次调用，从而减少了对服务器的请求次数，提高了性能。

debounce和throttle的区别

debounce和throttle都是函数节流技术，但它们之间还是存在一些区别的。

debounce 会在一定时间内只执行一次函数，如果在规定时间内函数被调用多次，那么只有最后一次调用的结果会被执行。
throttle 会在一定时间间隔内只执行一次函数，如果在规定时间内函数被调用多次，那么只有第一次调用的结果会被执行，后面的调用都会被忽略。

从本质上来说，debounce是保证一段时间内只执行一次，throttle则是保证一段时间内执行一次。

debounce和throttle的应用场景

debounce和throttle都有各自的应用场景。

debounce 适用于需要防止函数被多次调用的场景，比如：
- 输入框中的自动完成功能
- 滚动的加载更多内容
- 按钮的点击事件
throttle 适用于需要限制函数执行频率的场景，比如：
- 窗口的滚动事件
- 鼠标的移动事件
- 键盘的输入事件

debounce和throttle的实现

debounce和throttle可以在JavaScript中很容易地实现。以下是一些实现示例：

// debounce
function debounce(func, wait) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(this, args);
    }, wait);
  };
}

// throttle
function throttle(func, wait) {
  let lastCallTime = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastCallTime >= wait) {
      func.apply(this, args);
      lastCallTime = now;
    }
  };
}