解锁 JavaScript 节流与防抖函数的神秘面纱：小白也能轻松理解

前端

2023-11-28 02:02:09

揭秘 JavaScript 函数节流

函数节流是一种技术，它允许你在一段时间内只执行一次函数。即使在此期间触发了多次事件，它也会确保只有第一次调用的回调函数被执行。这对于防止不必要的函数调用非常有用，尤其是当事件被频繁触发时。

应用场景：

调整窗口大小时触发函数
滚动事件处理
输入字段的自动完成

函数防抖：让你的函数不再“颤抖”

函数防抖是一种技术，它会延迟执行函数，直到事件触发后的一段时间内没有再触发该事件。这对于防止函数被不必要地多次调用非常有用，尤其是在用户快速触发事件时。

应用场景：

搜索框的自动完成
提交表单时的验证
滚动到页面底部时的加载更多内容

实现节流和防抖函数

在 JavaScript 中，可以使用以下函数来实现节流和防抖：

节流函数：

function throttle(func, delay) {
  let last = 0;
  return function() {
    const now = new Date().getTime();
    if (now - last < delay) {
      return;
    }
    last = now;
    func.apply(this, arguments);
  };
}

防抖函数：

function debounce(func, delay) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, arguments);
    }, delay);
  };
}

为初学者准备的 JavaScript 函数节流与防抖教程

为了帮助初学者更好地理解函数节流和防抖，这里有一个简单的示例：

const element = document.getElementById('my-element');

// 使用节流函数调整窗口大小时触发
window.addEventListener('resize', throttle(() => {
  // 在这里执行你的代码
}, 200));

// 使用防抖函数在用户停止输入后触发
element.addEventListener('input', debounce(() => {
  // 在这里执行你的代码
}, 500));