JavaScript中的防抖与节流函数原理与实现

防抖和节流是JavaScript中优化高频事件的两种手段。防抖通过延迟执行，确保事件停止触发一段时间后才执行函数，适用于搜索框输入等场景；节流则保证函数在固定时间间隔内最多执行一次，适用于滚动监听、动画更新等需规律执行的场景。两者核心区别在于：防抖强调最后一次触发有效，节流强调周期性执行。掌握它们可显著提升性能与用户体验。

在JavaScript中，防抖（Debounce）和节流（Throttle）是两种常见的优化手段，用于控制函数的执行频率，避免因频繁触发而影响性能。它们常用于处理如窗口滚动、调整大小、输入框输入等高频事件。

防抖（Debounce）原理与实现

防抖的核心思想是：当事件被频繁触发时，只执行最后一次操作。 换句话说，只要事件持续触发，函数的执行就会被不断推迟，直到事件停止触发一段时间后才真正执行一次。

举个例子：用户在搜索框连续输入时，我们不希望每次输入都发送请求，而是等待用户停顿超过一定时间后再发起搜索请求，这就是防抖的应用场景。

实现方式：

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

通过定时器延迟函数执行，每次触发时清除之前的定时器，重新设置新的定时器。

以下是一个基础的防抖函数实现：

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

使用示例：

const searchInput = document.getElementById('search');
searchInput.addEventListener('input', debounce(function(e) {
  console.log('搜索:', e.target.value);
}, 300));

节流（Throttle）原理与实现

节流的核心思想是：规定一个函数在指定时间内最多执行一次。 即使事件被频繁触发，函数也只会按照固定的时间间隔执行，比如每100毫秒最多执行一次。

典型应用场景包括：页面滚动时监听位置变化、鼠标移动事件等，防止函数过于频繁地调用。

AI抖音

AI抖音，会思考的抖音

860

查看详情

实现方式：

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

可以通过时间戳或定时器来实现。时间戳方式更简单直观：记录上次执行时间，每次触发时判断是否已超过设定间隔。

以下是基于时间戳的节流实现：

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

使用示例：

window.addEventListener('scroll', throttle(function() {
  console.log('页面滚动中...');
}, 100));

防抖与节流的区别总结

虽然两者都是为了限制函数执行频率，但适用场景不同：

• 防抖适合“最后一次有效”的场景，如搜索框输入、按钮重复点击提交。
• 节流适合“规律性执行”的场景，如滚动监听、动画更新、游戏帧率控制。

简单理解：防抖是“等你不打了我才打”，节流是“我每隔一段时间打一次，不管你打多少”。

基本上就这些。掌握这两个模式，能有效提升前端性能和用户体验。

以上就是JavaScript中的防抖与节流函数原理与实现的详细内容，更多请关注php中文网其它相关文章！