当前位置：首页 > 文章列表 > 文章 > 前端 > 防抖节流技巧：优化输入与提升性能

防抖节流技巧：优化输入与提升性能

2026-01-21 17:08:55 0浏览收藏

编程并不是一个机械性的工作，而是需要有思考，有创新的工作，语法是固定的，但解决问题的思路则是依靠人的思维，这就需要我们坚持学习和更新自己的知识。今天golang学习网就整理分享《JavaScript防抖节流技巧：优化输入与提升性能》，文章讲解的知识点主要包括，如果你对文章方面的知识点感兴趣，就不要错过golang学习网，在这可以对大家的知识积累有所帮助，助力开发能力的提升。

防抖指事件触发后延迟执行，期间若再次触发则重新计时，适用于搜索联想等场景；节流指固定时间间隔内只执行一次，保证周期性响应，适用于滚动加载等持续行为。两者均通过限制函数执行频率提升性能，区别在于防抖关注最后一次操作，节流注重规律执行。实际应用需注意this指向、首次执行配置及延迟时间合理性，合理封装可复用并优化用户体验与系统负载。

JavaScript防抖节流_用户输入优化与性能提升

用户在输入框频繁输入时，会触发大量事件，比如搜索建议、表单验证等。如果不加以控制，这些高频触发的回调会导致页面卡顿、接口请求过多等问题。JavaScript中的防抖（Debounce）和节流（Throttle）是两种常用的优化手段，能有效减少函数执行次数，提升性能。

什么是防抖（Debounce）？

防抖的核心思想是：当事件被触发后，延迟一段时间再执行回调。如果在这段时间内事件再次被触发，则重新计时。

适用于：搜索框输入联想、窗口大小调整、按钮重复点击等场景。

常见实现方式：

使用 setTimeout 和 clearTimeout 控制延迟执行
每次触发事件时清除上一次的定时器，重新开始计时

示例代码：

function debounce(func, delay) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  };
}
<p>// 使用示例
const searchInput = document.getElementById('search');
searchInput.addEventListener('input', debounce(function (e) {
console.log('搜索:', e.target.value);
}, 300));</p>

什么是节流（Throttle）？

节流是指在一定时间间隔内，无论事件触发多少次，只执行一次回调。它不像防抖那样“重置”，而是固定频率执行。

适用于：滚动加载、鼠标移动监听、按钮提交防止重复提交等。

实现方式有两种主流思路：

定时器方式： 设置定时器，在到达间隔时间后执行，并清空定时器
时间戳方式： 记录上次执行时间，每次触发时判断是否超过设定间隔

时间戳方式示例：

function throttle(func, delay) {
  let lastTime = 0;
  return function (...args) {
    const now = Date.now();
    if (now - lastTime >= delay) {
      func.apply(this, args);
      lastTime = now;
    }
  };
}
<p>// 使用示例
window.addEventListener('scroll', throttle(() => {
console.log('页面滚动中...');
}, 100));</p>