防抖和节流：傻瓜式入门指南

前端

2024-02-02 03:49:45

在用户界面（UI）开发中，当我们遇到诸如输入框输入、鼠标滚动、点击事件等高频触发动作时，可能需要对事件处理函数进行优化，以避免频繁触发导致性能问题。防抖和节流是两种常用的优化技术，它们可以通过减少对事件处理函数的调用次数来提高UI的性能。

什么是防抖

防抖（debounce）是一种技术，它可以延迟执行函数，直到触发事件停止发生。也就是说，当一个事件在短时间内连续触发时，防抖函数只会执行一次。

防抖的优缺点

优点：

减少函数执行次数，从而提高性能。
防止函数在短时间内被重复执行，避免不必要的计算和操作。
保证函数只在事件停止发生后执行一次，提高代码的可读性和可维护性。

缺点：

会导致事件处理函数延迟执行，可能影响用户体验。
在某些场景下，可能需要立即执行函数，而防抖会阻止这种行为。

防抖的应用场景

防抖常用于以下场景：

输入框输入时，延迟执行搜索或自动完成功能，避免频繁触发请求或计算。
滚动事件中，延迟执行页面加载或更新操作，避免频繁触发页面重绘或重新计算。
窗口大小改变时，延迟执行页面布局调整操作，避免频繁触发页面重排。

什么是节流

节流（throttle）是一种技术，它可以限制函数在一定时间间隔内只执行一次。也就是说，当一个事件在短时间内连续触发时，节流函数只会在该时间间隔内执行一次。

节流的优缺点

优点：

减少函数执行次数，从而提高性能。
保证函数在一定时间间隔内只执行一次，提高代码的可读性和可维护性。

缺点：

会导致事件处理函数延迟执行，可能影响用户体验。
在某些场景下，可能需要立即执行函数，而节流会阻止这种行为。

节流的应用场景

节流常用于以下场景：

鼠标移动或滚动事件中，延迟执行页面滚动或拖动操作，避免频繁触发页面重绘或重新计算。
窗口大小改变时，延迟执行页面布局调整操作，避免频繁触发页面重排。
视频或音频播放时，延迟执行进度条更新操作，避免频繁触发进度条更新。

防抖和节流的区别

防抖和节流都是用于减少函数执行次数的技术，但它们的工作方式不同。

防抖只会在事件停止发生后执行一次函数，而节流会在一定时间间隔内执行一次函数。
防抖适用于需要在事件停止发生后执行一次函数的场景，而节流适用于需要在一定时间间隔内执行一次函数的场景。

如何使用防抖和节流

在JavaScript中，可以使用lodash、underscore等库来实现防抖和节流。也可以自己实现防抖和节流函数。以下是一些代码示例：

防抖函数

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

节流函数

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