如何实现javascript节流功能_javascript怎样控制函数执行频率

雨晨吖_2843

雨晨吖_2843

2026-01-04

461人浏览

原创

节流的核心逻辑是“固定时间窗口内最多执行一次”,保证函数在指定时间间隔内至少执行一次,典型用于scroll、mousemove事件;时间戳方案最简可靠,用date.now()比对lasttime实现,避免settimeout累积定时器导致的响应丢失。

如何实现javascript节流功能_javascript怎样控制函数执行频率

节流的核心逻辑是“固定时间窗口内最多执行一次”

节流(throttle)不是防抖(debounce),它不等待停止触发才执行,而是保证函数在指定时间间隔内**至少执行一次**。典型场景是 window.onscrollmousemove 事件监听——你希望每 100ms 最多处理一次,而不是等用户停下才响应。

setTimeout + 时间戳实现最简可靠节流

这是兼容性最好、逻辑最直白的写法,不依赖定时器叠加或闭包状态管理,避免了 setInterval 带来的同步风险和清理遗漏问题。

  • 记录上一次执行的时间戳 lastTime
  • 每次调用时,计算当前时间与 lastTime 的差值
  • 差值 ≥ 间隔(如 delay),则立即执行,并更新 lastTime;否则不执行
function throttle(fn, delay) {
  let lastTime = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastTime >= delay) {
      fn.apply(this, args);
      lastTime = now;
    }
  };
}

为什么不用 setTimeout + clearTimeout 模拟节流?

这种写法常见但容易误用为防抖:它本质是“延迟执行并不断重置”,若用户持续高频触发,函数可能**永远不执行**——这违背节流“保底执行”的设计目标。

Alibabacloud Sdk Client Initialization For Java
Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载
  • setTimeout 节流版本会累积定时器,需手动 clearTimeout,状态管理复杂
  • 无法保证“每 delay ms 至少触发一次”,只保证“最后一次触发后 delay ms 执行”
  • 在滚动场景中,用户快速拖动时,页面可能完全无响应,体验更差

注意 this 和参数传递的完整性

原生事件回调中的 this 指向触发元素(如 div),而节流函数返回的新函数默认丢失该绑定。必须用 fn.apply(this, args)fn.call(this, ...args) 显式还原上下文。

  • 漏掉 ...args 会导致事件对象(如 event)丢失,常见于 addEventListener 场景
  • 若需访问原生事件,确保监听时未使用 passive: true(否则 event 可能为只读或不可用)
  • 不建议在节流函数内部直接修改 event 属性,因节流可能跨多次事件调用,状态易混乱

节流看似简单,真正难的是在「不丢事件语义」和「不破性能底线」之间拿捏分寸——时间戳方案胜在确定性,而任何引入异步延迟的变体,都可能悄悄把“保底执行”变成“看运气执行”。

Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

javascript java

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
go语言闭包相关教程大全
go语言闭包相关教程大全

本专题整合了go语言闭包相关数据,阅读专题下面的文章了解更多相关内容。

2025.07.29

3373

19

Aionclaw智能助手介绍
Aionclaw智能助手介绍

本专题汇总了AionClaw(AI龙虾助手)的功能介绍与在线使用入口。AionClaw是杭州趣猿人工智能有限公司推出的桌面级AI智能体,能直接在电脑上读写文件、运行脚本、操作浏览器,自动交付Word、PPT、Excel等成品。

2026.09.20

0

13

AionClaw AI智能体与电脑自动化任务执行功能使用教程
AionClaw AI智能体与电脑自动化任务执行功能使用教程

AionClaw专题整理AI智能体与电脑自动化相关功能使用教程,涵盖安装部署、AI任务执行、Skills技能、文件处理、浏览器控制、电脑操作、持久记忆、聊天工具连接以及办公、编程和内容创作等功能,帮助用户快速掌握AionClaw的实际使用方法。

2026.09.20

0

15

AI视频生成软件推荐
AI视频生成软件推荐

本专题汇总了当前主流的AI视频生成软件推荐与排行榜单,涵盖seko、AniShort、剧云、Lovart、LiblibAI及立刻mv等热门工具。同时整理了各软件在文生视频、图生视频、时长限制、画质表现及免费额度等方面的差异对比,助您快速选对适合创作需求的AI视频生成工具。

2026.09.16

160

9

ai生成视频的工具免费版合集
ai生成视频的工具免费版合集

本专题汇总了当前免费AI生成视频工具的排行榜与推荐清单,涵盖seko、讯飞智作、AniShort及剧云、Lovart等多模型集成平台。同时整理了各工具的免费额度、输出时长、水印政策及适用场景差异,助您快速选择合适工具开启AI视频创作。

2026.09.16

60

10

Pandas时间序列分析与可视化报表
Pandas时间序列分析与可视化报表

本专题整理Pandas日期转换、时间索引、重采样、滚动窗口、时区处理、plot绘图、Styler表格样式和报表输出方法。

2026.09.16

80

23

Pandas数据筛选索引与清洗处理
Pandas数据筛选索引与清洗处理

本专题整理Pandas中的loc、iloc、条件筛选、query查询、缺失值处理、重复值删除、类型转换和字符串列清洗方法。

2026.09.16

60

25

Pandas数据读取导入与文件导出处理
Pandas数据读取导入与文件导出处理

本专题整理Pandas读取CSV、Excel、JSON、SQL、Parquet等文件的方法,以及to_csv、to_excel、to_sql和to_parquet等常用数据导出流程。

2026.09.16

40

27

GDB怎么设置断点
GDB怎么设置断点

本专题介绍GDB按照函数名、源代码行号和文件位置设置断点的方法,详细说明run、continue、next、step等命令的配合使用,帮助定位程序崩溃、逻辑异常及代码未按预期执行的问题。

2026.09.11

380

28

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 11.9万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.5万人学习