8月挑战 | 简单防抖和节流学起来

2023-09-14 13:08:11

引言

随着Web应用的日益复杂，前端性能优化变得越来越重要。前端优化性能的方式有很多种，其中就包括防抖和节流。防抖和节流不光能优化性能，还能应用在一些特定的场景。本文将对防抖和节流进行简单的介绍和比较，并提供一些示例代码，帮助您更好地理解和使用它们。

防抖

防抖（debounce）是一种技术，用于限制函数的执行频率。当一个函数被多次调用时，防抖可以确保该函数只在最后一次调用后执行一次。这通常用于处理用户输入，比如在用户输入时实时更新搜索结果。

防抖的实现通常使用计时器。当函数被调用时，计时器被重置。如果在计时器到期之前函数再次被调用，计时器将被重新设置。只有当计时器到期时，函数才会执行。

节流

节流（throttle）也是一种技术，用于限制函数的执行频率。与防抖不同的是，节流可以确保函数在一定时间间隔内只执行一次。这通常用于处理连续的事件，比如在用户滚动页面时不断更新页面内容。

节流的实现通常使用时间戳。当函数被调用时，时间戳被记录。如果在下一个时间戳之前函数再次被调用，函数将不会执行。只有当下一个时间戳到来时，函数才会执行。

比较

防抖和节流都是用于限制函数执行频率的技术，但它们有不同的特性和适用场景。

防抖适用于处理用户输入，比如在用户输入时实时更新搜索结果。
节流适用于处理连续的事件，比如在用户滚动页面时不断更新页面内容。

示例代码

以下是一些防抖和节流的示例代码：

// 防抖
function debounce(func, delay) {
  let timer;
  return function (...args) {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

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