讲师中心 微信公众号
AI工具推荐 视频效率加速

javascript中什么是节流_怎样实现节流函数【教程】

雨瑶酱_7510

雨瑶酱_7510

发布时间:2026-01-23 12:02:02

|

986人浏览过

|

来源于php中文网

原创

节流是“固定时间窗口内最多执行一次”,适用于resize、mousemove、scroll等高频非实时场景;核心用setTimeout加状态标记实现首次触发立即执行、之后每delay毫秒最多执行一次。

javascript中什么是节流_怎样实现节流函数【教程】

节流(throttle)不是“限制调用次数”,而是“固定时间窗口内最多执行一次”。它适合处理高频触发但不需要实时响应的场景,比如窗口 resize、鼠标 mousemove、滚动 scroll 事件。

节流函数的核心逻辑:定时器 + 状态标记

最常用且易理解的实现基于 setTimeout 和一个布尔标记。关键在于:触发时若未处于“等待执行”状态,就立即执行并设为“等待中”;否则只更新待执行的参数(如有),不重复设定时器。

  • 每次调用先检查 isThrottling 标志位,为 false 才进入执行流程
  • 执行后立刻设 isThrottling = true,并在定时器回调里重置它
  • 如果在等待期间又被调用,不新建定时器,只缓存最新参数(可选)
  • 注意:必须在定时器回调中重置标志位,不能在执行函数末尾——否则无法拦截后续调用
function throttle(fn, delay) {
  let isThrottling = false;
  return function(...args) {
    if (isThrottling) return;
    fn(...args);
    isThrottling = true;
    setTimeout(() => {
      isThrottling = false;
    }, delay);
  };
}

为什么不用 setInterval 或直接 clearTimeout 重置?

用 setInterval 实现节流会失去触发时机控制——它不管有没有新事件,只按固定节奏跑;而真实节流应“首次触发立刻执行,之后每 delay 毫秒最多再执行一次”。直接 clearTimeout 重置旧定时器(即“防抖式节流”)会导致行为漂移:可能永远等不到执行,尤其在持续高频触发时。

JavaStoryDevelop
JavaStoryDevelop

你接手一个需求时,是不是经常这样:"改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续";这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境(JDK、Spring Boot、ORM、数据库、前端框架),记在

下载
  • setInterval 方案无法响应“第一次触发就执行”的需求
  • 仅靠 clearTimeout + 新 setTimeout,实际退化成防抖(debounce),不是节流
  • 标准节流必须保有“立即执行 + 延迟锁定”双阶段,缺一不可

带 leading / trailing 控制的节流(Lodash 风格)

原生节流常需支持“首次触发是否立即执行(leading)”和“停止触发后是否补最后一次(trailing)”。这需要额外维护上次执行时间戳和一个延迟执行的定时器。

立即学习“Java免费学习笔记(深入)”;

  • leading: true 表示第一次调用立刻执行,之后进入冷却
  • trailing: true 表示冷却期结束后,若期间有新调用,则再执行一次(需记录最后参数)
  • 两者同时为 true 时,要注意避免重复执行——常见做法是用时间戳判断是否已过 delay,而非仅依赖标志位
  • Lodash 的 throttle 默认 leading=true、trailing=true,但实际项目中多数场景只需 leading=true

节流真正难的不是写出来,而是判断该不该用——比如搜索框输入,用节流反而卡顿,该用防抖;而 canvas 绘图跟随鼠标移动,漏掉中间几帧没关系,节流就比防抖更合适。别光抄代码,先想清楚事件频率和用户感知之间的关系。

相关文章

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

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

下载

相关标签:

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

热门AI工具

更多
WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

讯飞智作

讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

相关专题

更多
html5动画制作有哪些制作方法
html5动画制作有哪些制作方法

html5动画制作方法有使用CSS3动画、使用JavaScript动画库、使用HTML5 Canvas等。想了解更多html5动画制作方法相关内容,可以阅读本专题下面的文章。

4391

2023.10.23

canva可画使用技巧汇总
canva可画使用技巧汇总

本专题汇集了PHP中文网精心整理的Canva可画新手使用技巧大全,专为零基础用户打造。无论你是想制作精美海报、PPT还是社交媒体配图,这里都有从注册登录、模板搜索到AI辅助设计、导出分享的全流程保姆级教程。通过深入浅出的图文指南,帮助你快速跨越设计门槛,轻松掌握Canva可画的实用操作,让每个人都能成为设计达人!

264

2026.05.19

Gradle插件开发入门教程
Gradle插件开发入门教程

本专题介绍Gradle插件开发的基本流程,涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法,帮助你理解插件如何组织构建逻辑,减少多个项目之间的重复配置。

100

2026.10.22

Gradle Wrapper配置教程
Gradle Wrapper配置教程

本专题介绍Gradle Wrapper的基本作用,涵盖文件组成、生成方法、版本配置和任务调用,帮助你理解项目如何使用指定的Gradle版本,减少不同开发环境带来的构建差异。

60

2026.10.22

Golangci-lint检查器使用教程
Golangci-lint检查器使用教程

本专题整理Golangci-lint常用Linters的用途与配置方法,覆盖错误处理、无效代码、安全、复杂度、命名和依赖检查,帮助项目合理选规则。

60

2026.10.22

Gradle怎么构建Java项目
Gradle怎么构建Java项目

本专题介绍Gradle Java项目构建方法,涵盖Java插件配置、依赖声明、源码编译、测试执行和打包检查,帮助你理解各阶段的任务关系,逐步完成项目构建。

20

2026.10.22

PHP时间戳漏洞修复教程
PHP时间戳漏洞修复教程

本专题汇总PHP常见时间戳漏洞,包括2038年溢出、时区漂移、时间戳伪造、重放攻击、时间盲注与日志审计失效等,并给出升级64位环境、使用 DateTimeImmutable、统一UTC、严格超时校验、预处理绑定、hash_equals 比对等修复方案,帮助开发者快速排查和加固时间相关代码。

60

2026.10.22

Golangci-lint配置文件与规则设置
Golangci-lint配置文件与规则设置

本专题聚焦Golangci-lint YAML配置文件,讲清运行参数、规则启停、目录排除、问题过滤及严重级别设置,便于团队统一检查标准。

20

2026.10.22

Golangci-lint安装与入门教程
Golangci-lint安装与入门教程

本专题讲解Golangci-lint的安装、初始化、基础命令和首次代码检查,覆盖本地环境、Docker及多平台用法,帮助Go开发者快速上手。

40

2026.10.22

热门下载

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

精品课程

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

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.3万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.7万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn