JavaScript如何实现防抖和节流？JavaScript防抖和节流有什么区别？-Java-PHP中文网

JavaScript如何实现防抖和节流？JavaScript防抖和节流有什么区别？

裘德小鎮的故事

发布： 2025-05-31 12:12:02

原创

905人浏览过

javascript如何实现防抖和节流？javascript防抖和节流有什么区别？

防抖和节流是 JavaScript 中常用的优化手段，尤其在处理高频触发事件（比如 resize、scroll、input 等）时非常有用。它们的核心思想都是控制函数执行的频率，但适用场景不同。

什么是防抖（debounce）？

防抖的意思是：在一段时间内，如果某个函数被多次调用，只执行最后一次。常见于输入框搜索建议、窗口调整等场景。

举个例子，你在搜索框里连续打字，每输入一个字符就发一次请求，显然不合理。这时候就可以用防抖来限制请求频率，比如设置 300ms 的等待时间，只有当用户停止输入 300ms 后才真正发起请求。

实现方式大致如下：

立即学习“Java免费学习笔记（深入）”；

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

登录后复制

使用的时候可以这样绑定事件：

const searchInput = document.getElementById('search');
searchInput.addEventListener('input', debounce((e) => {
  console.log('发送请求：', e.target.value);
}, 300));

登录后复制

什么是节流（throttle）？

节流的意思是：在一定时间间隔内，无论触发多少次，只执行一次函数。常用于滚动加载、鼠标移动等场景。

比如页面滚动监听，你希望每隔一定时间检查位置，而不是每次滚动都触发，这时节流就很合适。

实现方式也比较简单：

function throttle(fn, delay) {
  let lastTime = 0;
  return (...args) => {
    const now = Date.now();
    if (now - lastTime >= delay) {
      fn.apply(this, args);
      lastTime = now;
    }
  };
}

登录后复制

使用示例：

window.addEventListener('scroll', throttle(() => {
  console.log('当前滚动位置：', window.scrollY);
}, 200));

登录后复制

防抖和节流的区别

简单来说：

防抖：等你不说话了我才执行。适合多次触发但只需要最后执行一次的情况。
节流：每隔一段时间执行一次。适合需要周期性执行，但不想太频繁触发的场景。

比如输入框搜索推荐用防抖；滚动到底部加载更多内容用节流更合适。

基本上就这些。理解清楚两者的应用场景，再结合实际代码练习几次，就能灵活运用了。

以上就是JavaScript如何实现防抖和节流？JavaScript防抖和节流有什么区别？的详细内容，更多请关注php中文网其它相关文章！