妙招：让你的JS代码更稳定流畅——JS防抖与节流

2023-09-21 16:25:15

JS防抖与节流：一锤定音和滴水穿石

在现代化的网页开发中，JavaScript（JS）已成为不可或缺的一部分。然而，过多的JS代码可能会带来性能问题，特别是当频繁触发函数调用时。为了应对这一挑战，JS社区引入了两种关键技术：防抖和节流。它们在控制函数调用频率方面发挥着至关重要的作用，确保网页顺畅响应交互。

防抖：一锤定音

防抖顾名思义，就是防止函数被频繁调用。它会将连续触发的函数调用合并成一次，只执行最后一次触发的函数。这样可以大大减少函数的调用次数，提高代码的执行效率和性能。

防抖在以下场景中有着广泛的应用：

表单验证：在输入框中输入时，防抖可以防止每次输入都触发一次验证，而是在用户停止输入一段时间后才触发一次验证，从而提高表单验证的效率和准确性。
搜索建议：在搜索框中输入时，防抖可以防止每次输入都触发一次搜索建议，而是在用户停止输入一段时间后才触发一次搜索建议，从而提高搜索建议的效率和准确性。
图片加载：在滚动加载图片时，防抖可以防止每次滚动都触发一次图片加载，而是在用户停止滚动一段时间后才触发一次图片加载，从而提高图片加载的效率和性能。

防抖的实现示例：

// 防抖函数
const debounce = (func, wait) => {
  let timeout;
  return (...args) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(this, args);
    }, wait);
  };
};

// 应用示例
const input = document.getElementById('input');
const debounced = debounce((e) => {
  console.log(e.target.value);
}, 300);
input.addEventListener('input', debounced);

节流：滴水穿石

节流与防抖类似，但它的关注点是控制函数调用的频率。节流会确保函数在一定的时间间隔内只执行一次，即使在函数被频繁触发的情况下。这样可以防止函数被过度调用，从而提高代码的稳定性和性能。

节流在以下场景中有着重要的作用：

窗口滚动：在窗口滚动时，节流可以防止每次滚动都触发一次事件处理函数，而是在窗口滚动停止一段时间后才触发一次事件处理函数，从而提高事件处理函数的效率和性能。
鼠标移动：在鼠标移动时，节流可以防止每次鼠标移动都触发一次事件处理函数，而是在鼠标停止移动一段时间后才触发一次事件处理函数，从而提高事件处理函数的效率和性能。
视频播放：在视频播放时，节流可以防止每次视频播放都触发一次事件处理函数，而是在视频播放停止一段时间后才触发一次事件处理函数，从而提高事件处理函数的效率和性能。

节流的实现示例：

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

// 应用示例
const window = document.getElementById('window');
const throttled = throttle((e) => {
  console.log(e.target.scrollTop);
}, 300);
window.addEventListener('scroll', throttled);