J*aScript防抖节流实现_J*aScript性能优化实战_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

JaScript防抖节流实现_JaScript性能优化实战

2025-12-01

浏览次数：次

返回列表

防抖和节流是前端优化高频事件的两种技术。防抖通过延迟执行，仅在事件停止触发后执行一次，适用于搜索输入等场景；节流则保证单位时间内最多执行一次，适合滚动监听等需规律响应的场景。两者均减少函数调用频率，提升性能。

javascript防抖节流实现_javascript性能优化实战

在前端开发中，频繁触发事件（如窗口滚动、输入框输入、鼠标移动）会导致性能问题。为优化这类场景，防抖（Debounce）和节流（Throttle）是两种常用的技术手段。它们能有效控制函数执行频率，减少资源消耗，提升页面响应速度。

防抖（Debounce）：只执行最后一次操作

防抖的核心思想是：当事件被触发后，设置一个延迟定时器；如果在延迟时间内事件再次被触发，则清除原定时器并重新计时。只有在连续触发结束后，目标函数才会执行一次。

这适用于搜索框输入建议、窗口大小调整等只需关注最终结果的场景。

示例：实现一个简单的防抖函数

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

使用方式：

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

节流（Throttle）：固定时间间隔内最多执行一次

节流确保函数在指定时间间隔内最多执行一次。无论事件触发多频繁，只要达到时间阈值就允许执行，其余触发被忽略。

适合处理高频但需保持响应节奏的操作，比如页面滚动监听、按钮点击防重复提交。

AiTxt 文案助手

AiTxt 利用 Ai 帮助你生成您想要的一切文案，提升你的工作效率。

98 查看详情 AiTxt 文案助手

示例：实现一个基于时间戳的节流函数

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

使用方式：

window.addEventListener('scroll', throttle(function() {
console.log('当前滚动位置:', window.scrollY);
}, 100));