JavaScript性能调优_防抖与节流-js教程-PHP中文网

JavaScript性能调优_防抖与节流

夢幻星辰

发布： 2025-11-23 21:13:04

原创

812人浏览过

防抖指事件频繁触发时仅执行最后一次，适用于搜索联想等场景；节流则保证在固定时间间隔内最多执行一次，适合滚动监听等连续操作，两者均通过降低函数执行频率提升性能。

javascript性能调优_防抖与节流

在前端开发中，JavaScript的性能优化是一个不可忽视的话题。特别是在处理高频触发事件时，比如窗口滚动、输入框输入、鼠标移动等，如果不加以控制，很容易造成页面卡顿甚至崩溃。防抖（Debounce）和节流（Throttle）是两种常用的优化手段，能有效减少函数执行次数，提升应用性能。

什么是防抖（Debounce）

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

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

实现方式：

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

function debounce(func, delay) {
  let timer = null;
  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）

节流的策略是：在一定时间间隔内，无论事件触发多少次，函数最多只执行一次。可以理解为“稀释”函数的执行频率。

常用于监听页面滚动、鼠标移动、窗口resize等连续触发但不需要每次都响应的场景。

有道智云AI开放平台

116

查看详情

实现方式（定时器版本）：

function throttle(func, delay) {
  let flag = true;
  return function (...args) {
    if (!flag) return;
    flag = false;
    setTimeout(() => {
      func.apply(this, args);
      flag = true;
    }, delay);
  };
}

登录后复制

也可以使用时间戳方式实现，逻辑略有不同但效果类似。