Web开发小贴士：JS中的防抖和节流，让你告别性能瓶颈！

前端

2023-11-19 03:48:19

性能优化：防抖和节流的强大作用

在互联网飞速发展的时代，用户对网站性能的要求愈发严苛。一个加载迅速、运行流畅的网站不仅能提升用户体验，还能促进转化率和用户粘性。而防抖和节流作为 JS 中的性能优化利器，可以显著降低函数调用频率，从而大幅提升网站响应速度。

防抖和节流：原理与区别

防抖针对需要一定间隔时间才能执行的函数。当函数被触发后，防抖会设置一个计时器。在计时器结束前，如果函数再次被触发，则取消计时器并重新开始计时。只有当计时器结束时，才会真正执行函数。

节流适用于需要在特定时间间隔内执行多次的函数。当函数被触发后，节流也会设置一个计时器。在计时器结束前，如果函数再次被触发，则忽略此次触发。只有当计时器结束时，才会执行函数。

通俗地说，防抖的作用类似于防止水龙头水花四溅，它会延迟执行函数，直至用户停止触发；而节流则像是限制水流，确保函数不会在短时间内被频繁调用。

应用场景：防抖和节流的用武之地

防抖和节流在 Web 开发中有着广泛的应用，包括：

搜索框输入建议： 当用户在搜索框中输入时，防抖会延迟执行搜索建议，避免不必要的频繁搜索。
表单验证： 当用户提交表单时，防抖可以延迟执行验证，避免在用户输入错误时反复触发验证。
页面滚动加载更多： 当用户滚动页面时，节流可以限制加载更多数据的频率，防止页面卡顿。
图片懒加载： 当用户滚动到图片区域时，节流可以延迟加载图片，节省带宽并提升页面加载速度。
视频播放器控制： 节流可以限制视频播放器的控制按钮的点击频率，避免用户误操作或重复操作。
游戏控制： 防抖可以防止游戏中的某些动作（如攻击或跳跃）在短时间内重复触发，提升游戏体验。

代码示例：如何使用防抖和节流

实现防抖和节流并不复杂，这里提供两个代码示例：

防抖：

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;
    }
  };
}