【JS】防抖(debounce)和节流(throttle)

1. debounce(防抖)

原理

debounce 的核心思想是:事件被触发后,等一段时间(比如300ms)没有再触发时,才执行一次函数。如果在这段时间内又触发了事件,则重新计时。

场景举例

  • 输入框搜索:用户输入时不马上请求接口,等停止输入一段时间后才发送请求,避免频繁调用接口。
  • 调整窗口大小:窗口尺寸变化频繁,只在调整停止后执行一次重绘。

📝debounce 手写实现

javascript 复制代码
function debounce(func, delay) {
  let timer = null;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

解析

  • timer 用来保存当前计时器。
  • 每次触发函数时,先清除旧的计时器。
  • 设置新的计时器,延迟 delay 毫秒后执行目标函数 func
  • apply(this, args) 保持调用时的上下文和参数。

2. throttle(节流)

原理

throttle 的核心思想是:保证在一个固定时间间隔内,函数最多执行一次。即使触发事件很多,函数调用频率也会被限制。

场景举例

  • 滚动加载:监听滚动事件时,不想频繁调用函数,节省性能。
  • 按钮连续点击防止多次提交。

📝throttle 手写实现

ini 复制代码
function throttle(func, interval) {
  let lastTime = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastTime >= interval) {
      lastTime = now;
      func.apply(this, args);
    }
  };
}

解析

  • lastTime 记录上一次执行函数的时间戳。
  • 当前时间 now 减去 lastTime 大于等于间隔时,执行函数,并更新时间戳。
  • 其他触发在这段时间内的调用都会被忽略。

总结对比

特点 debounce throttle
执行时机 停止触发后执行一次 固定时间间隔内执行一次
适用场景 输入框搜索,窗口调整等停止触发才执行 滚动监听,按钮点击限制等频率限制
触发次数 最后一次触发执行 按时间间隔执行
相关推荐
刚入坑的新人编程2 分钟前
暑期算法训练.9
数据结构·c++·算法·leetcode·面试·排序算法
陈随易8 分钟前
AI新技术VideoTutor,幼儿园操作难度,一句话生成讲解视频
前端·后端·程序员
Pedantic11 分钟前
SwiftUI 按钮Button:完整教程
前端
前端拿破轮13 分钟前
2025年了,你还不知道怎么在vscode中直接调试TypeScript文件?
前端·typescript·visual studio code
代码的余温15 分钟前
DOM元素添加技巧全解析
前端
JSON_L18 分钟前
Vue 电影导航组件
前端·javascript·vue.js
用户214118326360226 分钟前
01-开源版COZE-字节 Coze Studio 重磅开源!保姆级本地安装教程,手把手带你体验
前端
大模型真好玩40 分钟前
深入浅出LangChain AI Agent智能体开发教程(四)—LangChain记忆存储与多轮对话机器人搭建
前端·人工智能·python
帅夫帅夫1 小时前
深入理解 JWT:结构、原理与安全隐患全解析
前端
Struggler2811 小时前
google插件开发:如何开启特定标签页的sidePanel
前端