解析节流与防抖：巧用闭包抑制事件洪流

节流与防抖：异曲同工，妙用不同

节流与防抖都是用来控制事件触发频率的技巧，但它们的工作方式却截然不同。

节流：以时间为准绳，控制触发频率

节流就像一位尽职的守门人，它会控制事件在一定时间内只触发一次。当事件在规定时间内再次发生时，守门人会将它拒之门外，防止其触发回调函数。

防抖：以稳定为目标，延迟触发时机

防抖则像一位经验老道的狙击手，它会等待事件在一定时间内不再发生后，才扣动扳机触发回调函数。这样可以确保回调函数只在事件稳定下来后才执行，避免了不必要的多次触发。

何时使用节流，何时使用防抖？

选择使用节流还是防抖，取决于具体的使用场景。

使用节流的场景

• 当您希望在一定时间内只触发一次事件时，可以使用节流。例如：

• 调整浏览器窗口大小时，只触发一次回调函数来更新页面布局。
• 滚动页面时，只触发一次回调函数来加载更多内容。

使用防抖的场景

• 当您希望在事件稳定下来后才触发事件时，可以使用防抖。例如：

• 在搜索框中输入内容时，只在用户停止输入一定时间后才触发回调函数来发送搜索请求。
• 在表单中输入内容时，只在用户停止输入一定时间后才触发回调函数来验证输入内容的有效性。

JavaScript 中的节流与防抖实现

在 JavaScript 中，我们可以使用闭包来实现节流与防抖。

节流的 JavaScript 实现

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

防抖的 JavaScript 实现

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

结语

节流与防抖是前端开发中非常有用的技巧，它们可以帮助我们控制事件触发频率，优化网页性能。希望本文对您理解和使用节流与防抖有所帮助。