节流和防抖：让你的前端代码更加优化

2023-12-27 17:17:39

节流和防抖：概述

节流和防抖都是前端优化中常用的技术，它们可以显著改善网页的性能和响应速度。节流通过限制函数在一定时间内只能被调用一次来避免不必要的重复调用，而防抖则通过延迟函数的执行来确保其只在用户停止触发事件后才执行。

节流适用于那些需要在一段时间内频繁触发的事件，例如滚动、调整窗口大小等。通过节流，我们可以确保函数不会被重复调用，从而避免不必要的计算和性能浪费。

防抖适用于那些需要在用户停止触发事件后才执行的函数，例如搜索框的自动完成、表单验证等。通过防抖，我们可以避免在用户还在输入或操作过程中就触发函数，从而提高用户体验和代码的健壮性。

节流和防抖：实现

节流的实现

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

防抖的实现

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

节流和防抖：源码

节流的源码

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

防抖的源码

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

节流和防抖：使用场景

节流和防抖在前端开发中有着广泛的应用场景，以下是一些常见的例子：

节流：
- 滚动事件处理：在滚动事件中，我们可以使用节流来限制滚动条的滚动速度，避免不必要的性能消耗。
- 调整窗口大小事件处理：在调整窗口大小事件中，我们可以使用节流来限制窗口大小调整的频率，避免不必要的重排和重绘。
防抖：
- 搜索框的自动完成：在搜索框中，我们可以使用防抖来延迟自动完成功能的执行，直到用户停止输入。
- 表单验证：在表单中，我们可以使用防抖来延迟表单验证的执行，直到用户提交表单。