【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
执行时机 停止触发后执行一次 固定时间间隔内执行一次
适用场景 输入框搜索,窗口调整等停止触发才执行 滚动监听,按钮点击限制等频率限制
触发次数 最后一次触发执行 按时间间隔执行
相关推荐
zhanshuo15 分钟前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html
火柴盒zhang16 分钟前
websheet在线电子表格(spreadsheet)在集团型企业财务报表中的应用
前端·html·报表·合并·spreadsheet·websheet·集团财务
khalil18 分钟前
基于 Vue3实现一款简历生成工具
前端·vue.js
拾光拾趣录24 分钟前
浏览器对队头阻塞问题的深度优化策略
前端·浏览器
用户81221993672225 分钟前
[已完结]后端开发必备高阶技能--自研企业级网关组件(Netty+Nacos+Disruptor)
前端
万少29 分钟前
2025中了 聊一聊程序员为什么都要做自己的产品
前端·harmonyos
程序员爱钓鱼1 小时前
Go 语言泛型 — 泛型语法与示例
后端·面试·go
abigale033 小时前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者3 小时前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile3 小时前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome