手动实现JS防抖

最新推荐文章于 2025-06-05 11:46:42 发布

小鹰丶

最新推荐文章于 2025-06-05 11:46:42 发布

阅读量639

点赞数

CC 4.0 BY-SA版权

分类专栏： # JavaScript 文章标签： JavaScript 防抖 js

本文链接：https://blog.youkuaiyun.com/jeremyjone/article/details/106946633

本文介绍了JavaScript中的防抖技术，防抖能避免函数的频繁调用，保证页面性能和数据准确性。通过一个实例展示了未使用防抖时，鼠标移动事件触发函数导致数字不断增长的问题。使用underscore库的防抖功能后，只有在鼠标静止一段时间后才会执行函数。最后，文章提供了手动实现防抖函数的简单方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文地址： https://www.jeremyjone.com/704/，转载请注明。

什么是防抖

事件响应函数在一段时间后才执行，如果在这段时间内再次调用，则重新计算执行时间；当预定的时间内没有再次调用该函数，则执行该函数。

防抖做什么

防止某些函数的频繁调用，保证页面的稳定流畅和数据准确性。

一个小的例子

使用 underscore 的防抖功能来测试一下效果。

中文网址

在页面中直接导入cdn即可。

https://cdn.bootcss.com/underscore.js/1.9.1/underscore.js

未防抖时的样子

将下面内容粘贴到一个HTML的body标签中。

<div id="container" style="width:100%;height:200px;line-height:200px;text-align:center;color:#fff;background-color:#444;font-size:30px;"></div>
<script>

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小鹰丶

关注关注

0
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

JS中防抖函数介绍与实现（秒懂如何手写防抖）

百赢出品，必属精品

04-01

3154

函数防抖是一种用于限制函数执行频率的技术。在JavaScript中，函数防抖常用于处理频繁触发的事件，如浏览器窗口的resize事件、滚动事件、输入框的输入事件等。它通过延迟函数的执行来确保在一定时间内只执行一次。可以避免频繁触发事件造成不必要的资源消耗或执行结果混乱的情况，而只关注最后一次触发事件的结果。1.当事件被触发时，不立即执行事件处理函数，而是等待一段时间（延迟时间）。2.如果在这段时间内事件再次被触发，则重新计时，延迟时间重新开始计算。3.直到延迟时间内没有再次触发事件，才执行事件处理函数。

深入理解防抖函数：实现一个完美的 JavaScript 防抖类

编码行者的博客

06-05

554

防抖函数的基本原理是：在连续触发事件的过程中，只在最后一次事件触发后的一段时间内调用目标函数。这样可以有效减少高频率事件的处理次数，提升性能表现。通过本文的介绍，我们不仅理解了防抖函数的原理，还学习了如何实现一个功能完备的防抖函数类。这个类不仅满足防抖的基本需求，还提供了更多的控制和统计功能，适用于各种前端开发场景。希望这个防抖函数类能为你的项目带来帮助。如果你有任何疑问或建议，欢迎在评论区留言讨论。

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

手动实现防抖、节流函数！

m0_71955188的博客

09-19

176

if (!// 示例使用// 将 throttledHandleScroll 绑定到某个元素的事件上，比如窗口的 scroll 事件。

JS 节流（Throttle）与防抖（Debounce）详解

最新发布

2203_75479159的博客

06-05

1115

是的，移动端建议适当增加延迟（如PC用300ms，移动端用500ms）（Lodash）或未实现立即执行逻辑。

手动实现防抖与节流

swallowblank的博客

06-06

276

其实这种文章网上已经烂大街了，但是我还是要自己去手写一遍，一是便于记忆，二是提高自己的理解。今年四月份在阿里的实习招聘笔试题中，当时就出现了一道节流的题目，但是当时还没有看到这里，于是便稀里糊涂硬着头地写了，没想到当时自己第一次自主思考的节流的实现，居然和标准答案基本一致，还是挺惊讶的，因为之前从来没看过别人的代码。什么是防抖与节流？防抖先说说防抖。抖动，可以理解为一次事件的触发。有的事件有高频触发的特点，比如 mousemove，scroll，mousedown 等，尤其是指针移动这个事件，可以

防抖节流手动实现

旧忆时光的博客

02-17

551

什么是防抖（debounce）所谓防抖，就是指触发事件后n秒后才执行函数，如果n秒内又触发了事件，则会重新计算函数执行时间（类似死歌放大招~）。本质是：某一时间段只执行一次，主要应用场景：大多应用于search搜索联想和window触发resize的时候，不断调整浏览器窗口大小会不断触发这个事件，用防抖来让其只触发一次。节约请求资源。 funtion debounce(func,delay){ let timer = null return (..args)=>{ clearTi.

js 手写篇-手写防抖

Allez_的博客

12-19

338

js 手写防抖

逐行解释JS防抖及防抖的使用

weixin_44375186的博客

02-24

2233

debounce(func, waitTime) { let timer = null; return function() { const context = this; const args = arguments; if (timer) { clearTimeout(timer); } timer = setTimeout(() => func.apply(context, args), waitTime); } }

JS手写防抖

jiang_jin3323的博客

06-02

126

防抖 let timeout = null; /** * 防抖原理：一定时间内，只有最后一次操作，再过wait毫秒后才执行函数 * * @param {Function} func 要执行的回调函数 * @param {Number} wait 延时的时间 * @param {Boolean} immediate 是否立即执行 * @return null */ function debounce(func, wait = 500, immediate = false) { // 清

JS手写函数实现防抖和节流

yigetutouzai的博客

07-08

1206

防抖和节流都是为了项目优化而出现的，官方没有做出具体定义，他们的出现主要是为了解决一些短时间内连续执行的事件带来性能上的不佳和内存的消耗巨大等问题；像这类事件一般像 scroll keyup mousemove resize等等，短时间内不断的触发，在性能上消耗是非常大的，尤其是一些改变DOM结构的操作。...

js 点击按钮的防抖

weixin_35755823的博客

01-09

1339

防抖 (debouncing) 是一种技术，旨在减少函数在短时间内被频繁调用的情况。在 JavaScript 中，可以通过使用 setTimeout 函数来实现防抖。例如，假设你有一个在点击按钮时调用的函数： function handleClick() { console.log('Button clicked'); } document.querySelector('button')...

手动实现一个防抖（deboumce）

我乃小神神的博客

05-08

511

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>防抖</title> </head> /* * 需要利用定时器， * 当我们执行这个函数时，会生成一个定时器， * 但是如果你重复执行这个函数，每次执行函数的第一步是清除上一次的定时器， * 这样就可以达成只有触发操作后超过指定的间隔说明这一次触发才有效，否则就要重新计时等待

JS 手写防抖

木木木森林

02-24

172

JS 手写防抖 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti

JavaScript 手写实现防抖和节流

靖凡无所畏惧的个人博客

03-01

871

是什么本质上是优化高频率执行代码的一种手段如：浏览器的 resize、scroll、keypress、mousemove 等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能为了优化体验，需要对这类事件进行调用次数的限制，对此我们就可以采用throttle（防抖）和debounce（节流）的方式来减少调用频率节流使用时间戳实现 function throttled(fn,delay=500){ let oldTime = Date.now(); re

js--手写防抖函数

wlijun_0808的博客

03-15

2449

5，手写防抖函数函数防抖是指在事件被触发n秒之后再执行回调，如果在这n秒时间内事件又被触发，则会重新进行计时，这可以是用在一些点击请求的事件上，避免因为用户的多次点击向后端发送多次请求。防抖应用的场景： scroll事件滚动触发搜索框输入查询表单验证按钮提交事件浏览器窗口缩放 /** * 防抖函数 * @param method 事件触发的操作 * @param delay 多少毫秒内连续触发事件，不会执行 * @returns {Function} */ function deb

手写js-防抖,节流

Florenza的博客

12-07

1862

以最后一次操作为准开始计时器此操作分为立即执行/非立即执行即多次触发事件，第一次会立即执行函数，之后在设定wait事件内触发的事件无效，不会执行类似于百度属于的首字母去发请求（立即执行）后续字母则遵循防抖规则html js js面试手写: js手写面试 - Gitee.com 相当于玩游戏有一个技能cd 在cd没好的时候触发不了完整案例代码 html js js面试手写: js手写面试 - Gitee.com

手动实现一个节流throttle、防抖debounce

WeidForest的博客

08-26

353

手动实现一个节流、防抖节流throttle、防抖debounce区别节流throttle、防抖debounce区别首先了解一节流和防抖的区别，然后才好根据我们的需求，进行选择：节流：间隔时间之后才可以执行，中间无效。在时间段之内继续操作，停止时间段内的操作执行，过了时间段才可以继续操作。eg:射击游戏开枪的间隔，第一次是直接能开枪的，然后之后不管鼠标点击多少次，只有过了间隔时间才可以开枪，之间的都是无效操作。防抖：时间段内执行最后一次操作。在时间端内继续操作，会停止之前没执行完的操作，并执行最新

详解防抖的概念并且手动实现防抖函数

m0_59802463的博客

04-02

374

详解防抖的基本概念并且手动实现防抖函数