Js防抖函数（详细注释）

最新推荐文章于 2025-06-10 09:45:49 发布

原创

最新推荐文章于 2025-06-10 09:45:49 发布 · 479 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

防抖

防抖是指短时间内大量触发同一事件，只会在最后一次事件完成后延迟执行一次函数。例如，在输入用户名的过程中，需要反复验证用户名。此时，您应该等待用户停止输入，然后进行验证，否则将影响用户体验。防抖实现的原理是在触发事件后设置计时器。在计时器延迟过程中，如果事件再次触发，则重置计时器。在没有触发事件之前，计时器将再次触发并执行相应的功能。

声明定时器

返回函数

一定时间间隔，执行回调函数

回调函数
    已执行：清空定时器
    未执行：重置定时器

下面是一个简单的JavaScript防抖函数实现：

function debounce(fn, delay) {
   
   
        let timer = null
        return function (

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

也无晴也无风雨

关注关注

5
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

js 函数防抖(debounce)与节流(throttle)

青蛙king的博客

07-21

4880

一、函数防抖二、函数节流

javaScript 防抖/节流，探索学习，对新手友好的内容

潜心

10-19

1212

debounce, 节流 :throttle;这俩个名词大家都不陌生，不管是学习，面试，笔试，偶尔总要提提，网上的参考文献也是大有篇章，其中有好多优秀的文章都写的很好了，大家都可以参考的来理解，我们的目的只有一个，那就是理解，并学习，从而创新。我的目的就是从保姆的角度来解释一下这俩个技术，以便大家容易理解；📚javascript专栏☃️ 个人简介：一个喜爱技术，喜欢探索的人。🌞 励志格言: 脚踏实地，虚心学习，相信自己的配得上所有美好。

参与评论您还未登录，请先登录后发表或查看评论

JS 函数防抖

最新发布

Made In SQL

06-10

1345

JavaScript函数防抖（Debounce）是一种性能优化技术，用于控制高频触发事件的执行频率。其核心原理是通过定时器延迟函数执行，在事件连续触发时重置计时，只有在最后一次触发后等待指定时间才会执行。与函数节流（Throttle）不同，防抖强调"等待稳定"，适用于搜索框输入联想、窗口调整等场景；而节流采用"固定间隔执行"，适合滚动事件处理等需要持续响应的场景。基础实现使用setTimeout和clearTimeout，还可扩展为立即执行版本。实际应用时需根据场

js之防抖函数

RayShyy的博客

04-10

7111

防抖原理事件响应函数在一段时间后才执行，如果这段时间内再次调用，则重新计算执行时间。意思是如果在规定的时间内无论你怎么触发事件都不会执行，只有在最后一次触发事件后并且在规定的时间内无触发事件操作才会执行。防抖原理举例(这里以点击按钮为例)：设置防抖的时间为2秒；点击一次按钮，则开始倒计时；如果在2秒内再次点击按钮，则重新从2秒开始倒计时；如果2秒过后没有再点击按钮，则执行点击按钮对应的事件，否则就再次从2秒开始倒计时。代码实现(这里以点击按钮为例) 实现过程讲解(使用定时器实现)：

js 防抖函数

ZhaojunWang的博客

02-15

244

debounce (func, delay) { let timer = null return function (...args) { if (timer) clearTimeout(timer) timer = setTimeout(() => { // this, func.apply(this, args) }, delay) } }

JavaScript函数实践与注释详解

综上所述，“JS-Functions”不仅仅是一个简单的代码集合，而是一套完整的 JavaScript 函数学习体系，融合了语法讲解、实战演练、注释说明与工程实践，适合希望系统掌握 JavaScript 函数机制的学习者深入研读。...

深入了解JavaScript 防抖和节流

10-16

JavaScript中的防抖(debounce)和节流(throttle)是两种常用的优化策略，它们主要用于控制频繁触发的函数调用，以提高性能和用户体验。这两种技术在处理窗口 resize 事件、滚动事件、搜索输入框的实时查询等场景中尤其...

JS动画效果源代码（含注释）

03-06

"JS动画效果源代码（含注释）"这个资源包含了实现各种JavaScript动画效果的源码，这些代码经过了详细的注释，方便初学者理解和学习。在JavaScript中，动画效果主要通过操作DOM（Document Object Model）元素的样式...

JavaScript 函数防抖

m0_54829066的博客

12-23

1783

如果每次用户输入都立即触发函数，会导致函数频繁触发，浪费资源。使用防抖函数，可以在用户输入后延迟一段时间才触发函数，从而节省资源。需要注意的是，这个防抖函数是基于定时器实现的，所以在使用过程中可能会有一些精度问题。当函数被触发时，防抖函数会延迟执行函数，并且如果在延迟期间内再次触发函数，则会重新计算延迟时间。这样可以避免函数在短时间内多次触发，从而节省资源。JavaScript 函数防抖（debounce）是一种技术，可以防止函数在短时间内多次触发。防抖函数返回一个新函数，在新函数中设置了延迟执行的逻辑。

javascript防抖函数

黄星的专栏

11-23

159

debounce(防抖) 多次执行，最后只执行一次 function debounce(fn, delay = 50) { let timer = null return function (...args) { if (timer) { clearTimeout(timer) } timer = setTimeout(() => { fn(...args) }, delay) } } const debounceObj =

js实现防抖函数

睡觉不打呼噜的博客

06-18

575

js实现防抖函数为什么要有防抖函数？我们的input输入框，每一次输入都会连续触发事件，如果事件中都会去服务器请求数据的话，太过于频繁请求，对我们的服务器造成巨大压力。而我们只需等到用户没有输入信息时，延迟一会再向服务器请求数据就好了。比起：连续发请求和只发一次请求，后者最佳。 ... 防抖函数的使用场合： input输入框的实时输入事件：oninput，当没有输入时才发请求。过于频繁的事件触发。 ... 结构如下： <input type="text" id="inpu

JS高级——防抖函数

@SCY

02-26

7105

防抖函数具体实现过程

JS防抖函数

weixin_40532650的博客

12-02

303

参考：js 防抖实战讲解_weixin_33775582的博客-优快云博客 var timer //跳转指定页面-prev function jumpPage() { if (timer) { clearTimeout(timer) //如果200ms内又一次触发，则会重新计算时间 } timer = setTimeout(() => { jumpPageNow() }, 200) } ...

Js防抖函数

AJINNIU的博客

10-31

2561

//防抖函数当持续出发事件，一定时间内没有在触发事件，事件才会再次执行如果当设定的时间到来之前又一次出发触发了事件就重新开始直接看代码 <input type="text" id="input"> <script> var input = document.getElementById('input') //防抖的函数 function debounce(delay,callback){ let timer return function (val

JavaScript函数防抖

m0_67937429的博客

10-12

296

一定要掌握的函数防抖

JS函数防抖

huyao的博客

06-04

300

函数防抖就是在函数需要频繁触发的情况下，只有足够的空闲时间，才执行一次。好像公交司机会等人都上车后才出站一样。应用场景：实时搜索拖拽当输完nba之后人会稍微有所停顿，在停顿时才刷新页面实现代码function debounce(handler, delay){ delay = delay || 300; var timer = null; return function() { var...

js 函数防抖

全易

03-11

441

其实就是延后执行。但不是把延后过程中的所有事情都延后然后执行出来，而是延后执行你最后一次操作例如用户输入搜索，不是每次打字都搜出来，而是搜最后一次结果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> ...