JavaScript防抖与节流函数实战应用_javascript技巧-js教程-PHP中文网

JavaScript防抖与节流函数实战应用_javascript技巧

夢幻星辰

发布： 2025-10-31 18:39:10

原创

231人浏览过

防抖只执行最后一次，节流固定间隔执行一次。防抖适用于搜索框输入等场景，节流适用于滚动监听、按钮点击等场景，二者均用于优化频繁触发事件的性能问题。

javascript防抖与节流函数实战应用_javascript技巧

在前端开发中，频繁触发的事件（如窗口滚动、输入框输入、鼠标移动等）容易造成性能问题。JavaScript中的防抖（debounce）和节流（throttle）是两种常用的优化手段，用于控制函数执行频率，提升页面响应速度与用户体验。

防抖函数：只执行最后一次操作

防抖的核心思想是：当事件被触发后，设置一个延迟定时器，若在延迟时间内事件再次触发，则清除之前的定时器并重新计时。只有当事件停止触发超过指定时间后，才会执行目标函数。

适用场景：搜索框输入联想、表单验证、窗口大小调整后重新渲染等。

例如，在搜索框中用户每输入一个字符就发起请求，如果不加限制，会频繁调用接口。使用防抖后，仅在用户停止输入一段时间后再发送请求。

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

防抖函数实现：

function debounce(func, wait) {
  let timeout;
  return function (...args) {
    const context = this;
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(context, args), wait);
  };
}

登录后复制

使用方式：

```javascript const searchInput = document.getElementById('search'); searchInput.addEventListener('input', debounce(function (e) { console.log('搜索关键词:', e.target.value); }, 300)); // 延迟300毫秒执行 ```

节流函数：固定时间间隔执行一次

节流的原理是：保证函数在一定时间间隔内最多执行一次。无论事件触发多少次，函数都按设定的时间周期稳定执行。

适用场景：页面滚动监听、按钮点击防止重复提交、鼠标拖拽事件等。

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

比如监听页面滚动位置来判断是否到达某个区域，如果每次滚动都计算，会造成大量重复运算。通过节流可降低执行频率。

节流函数实现（时间戳版本）：

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

登录后复制

使用方式：

```javascript window.addEventListener('scroll', throttle(() => { console.log('当前滚动位置:', window.pageYOffset); }, 100)); // 每100毫秒最多执行一次 ```