手动实现JS防抖

最新推荐文章于 2025-10-17 19:44:31 发布

原创

最新推荐文章于 2025-10-17 19:44:31 发布 · 653 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #防抖 #js

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

原文地址： 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元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小鹰丶

关注关注

0
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

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

百赢出品，必属精品

04-01

3314

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

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

js--手写防抖函数

wlijun_0808的博客

03-15

2481

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

JS防抖和节流

W2004828的博客

10-17

815

摘要：本文介绍了防抖和节流两种优化高频事件触发的技术。防抖通过延迟执行，确保函数只在事件停止触发后执行（如输入框搜索）；节流则限制函数在一定时间间隔内只执行一次（如滚动事件）。两种方法都使用了闭包和定时器技术，能有效减少冗余执行，提升性能。文章详细说明了实现原理和代码示例，并推荐了lodash库的现成解决方案。适用于表单验证、窗口调整、滚动监听等场景，能显著改善用户体验。

JS防抖的实现与解析

weixin_64502378的博客

01-24

1765

由于return返回的新函数内部的timeId变量一直在访问这个外部的timeId变量，所以这个timeId不会被销毁。这样我们就拿到了上一次保存的timeId，那么拿到之后就可以进行清除操作了。现在已经初步实现了一个防抖的功能。

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

m0_71955188的博客

09-19

254

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

手动实现防抖与节流

swallowblank的博客

06-06

289

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

js中防抖 debounce 节流 throttle 原理从0手动实现

qq_33546823的博客

09-28

722

高频触发事件时，执行损耗高的操作，连续触发过程中，只执行最后一次。实现防抖步骤：1.在回调函数中判断timer是否存在，存在就清理计时器，重新计时执行。2.在实现debounce函数时，注意返回函数和传入的函数参数都不能时回调函数，否在造成this丢失。3. debounce函数中返回函数顶层使用this保存，回调函数使用apply调用。4.要使传递参数可行，顶层函数解构赋值参数，然后再回调apply时传入参数（注意不需要解构，...args时就是个数组）。

vue3的按钮手动实现防抖和截流

07-16

在 Vue3 中手动实现按钮的防抖（debounce）和节流（throttle）功能，可以通过自定义函数或使用指令的方式完成。这两种方式都适用于 Composition API 和 `<script setup>` 语法。 --- ### 防抖（Debounce）防抖的...

js实现手写防抖函数

最新发布

10-18

以下是不同优化程度的 JavaScript 手写防抖函数实现方法： ### 基本实现 ```javascript function debounce(fn, wait) { let timer = null; return function() { clearTimeout(timer); timer = setTimeout(() =>...

防抖节流手动实现

旧忆时光的博客

02-17

570

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

js 手写篇-手写防抖

Allez_的博客

12-19

353

js 手写防抖

JS手写防抖

jiang_jin3323的博客

06-02

135

防抖 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

1239

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

js 点击按钮的防抖

weixin_35755823的博客

01-09

1369

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

手动实现一个防抖（deboumce）

我乃小神神的博客

05-08

530

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

JS 手写防抖

木木木森林

02-24

185

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

912

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

手写js-防抖,节流

Florenza的博客

12-07

1910

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

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

WeidForest的博客

08-26

367

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