防抖Debounce实现

最新推荐文章于 2024-08-30 23:04:40 发布
最新推荐文章于 2024-08-30 23:04:40 发布
阅读量264 收藏
点赞数
分类专栏： 前端 - JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wwwqiaoling/article/details/104941842
版权
防抖是提升用户体验的策略，特别是在输入框连续操作时。它确保在用户停止输入一段时间后才执行事件处理函数。本文通过代码示例展示了如何实现一个等待用户输入暂停一秒钟后触发事件的防抖函数。
摘要由CSDN通过智能技术生成

防抖是属于体验优化的一个手段，咱们来看下一个具体的情景，在输入框中输入信息，然后触发change事件，如果一直输入，那就回一致触发这个事件，体验就不太友好，如果等用户输入暂停的时候再触发就好很多了。

对于上面的问题，咱们可以先设置一个定时器，输入暂停后，并且到了定时的时间再触发change事件。
页面元素比较简单，就不写了，直接写逻辑代码吧！废话不多说，直接上代码！

// 首先获取目标元素
const input1 = document.getElementById('input1')
// 定义防抖函数
function debounce(callback, delay
最低0.47元/天 解锁文章
巧兔兔
关注
专栏目录
防抖（debounce）
qq_41988113的博客
04-28 668
应用场景：滚动条事件监听 问题1：为什么需要使用防抖函数？举个例子 在项目中，我们可能需要通过监听图片的加载来重新获取（条用scroll.refresh函数）滚动的区域（scrollerHeight）,我们一次请求的图片可能是很多张，而请求的速度也比较快，就会出现在短时间内频繁执行refresh函数，致使服务器性能降低。 解决方法： 利用防抖函数，在某个时间期限内，事件处理函数只执行一次 /* * 封装一个防抖函数 * 防抖函数传入两个参数 *...
debounce防抖
qq_42345758的博客
05-31 370
首先是为什么防抖，当我们持续反复触发时间的时候，会加重浏览器的负担，用户体验会很少 所以我们可以采用debounce(防抖)和throttle(节流)来减少频繁使用的频率 但是不影响功能 function debounce(self, func, immediate) { return function() { var context = self; ...
防抖函数 debounce promise版本debouncePromise
最新发布
逆水行舟，不进则退
08-30 320
如果用普通的 debounce 去防抖 promise 类型的异步函数，是获取不到返回值的。此时需要使用 Promise 版的防抖函数。
手把手教你实现一个防抖函数(debounce)
fang_my的博客
11-30 5875
闭包不另开一篇文章讲解是讲不完的，并且阮一峰阮大的闭包讲解的已经很好了，我就不献丑了） 对于现在的场景简单来说，你可以这样理解。那么我们的 防抖 函数在这里的作用其实就是帮你把这个函数包装一下的意思，它并不会直接影响这个函数的内部逻辑，就像你的礼物包装一层包装纸🎁后，它本身是没有发生任何变化的。我仅仅只是想最后搜索 hanzhenfang 这几个关键词，但是我在输入每一个字符的时候，都会去后端请求一次，数据量小还好，如果数据量过大的话，由于前几次的请求都是毫无意义的，势必会造成性能和资源上的浪费。
防抖(debounce)
毒牙
06-11 595
防抖(debounce)和节流(throttle) 防抖(debounce)：指的是某个函数在某个时间段内，无论触发多少次，都只执行最后一次。 代码如下： function debounce(fn, wait=100) { // 设定定时器 let timer = null; return function(...args) { if(timer) { clearTimeout(...
js代码-防抖debounce实现
07-15
`main.js` 文件可能包含了防抖函数的实现，我们先来看一下防抖函数的基本结构： ```javascript function debounce(func, wait) { let timeoutId; return function() { const context = this; const args = ...
防抖debounce函数的基本使用
qq_47230378的博客
10-11 2494
防抖和节流函数目前已经是前端实际开发中两个非常重要的函数，也是面试经常被问到的面试题，我们会一起来学习防抖和节流函数。coderwhy老师讲的debounce的基本使用，注意这里面有this的绑定与参数的传递。
在vue+element ui框架里实现lodash的debounce防抖
10-16
这时，lodash的`debounce`函数就能派上用场，它可以帮助我们实现防抖(debounce)功能，避免频繁触发昂贵的操作，如网络请求。 防抖(debounce)是一种优化策略，它确保一个函数在连续触发时，只有在停止触发一段时间后...
防抖（Debounce）
m0_63548381的博客
02-29 3553
防抖是一种前端常用的优化技术，用于防止连续多次触发事件。从而减少不必要的计算、网络请求或者页面渲染，提高性能。当一个事件被触发时，防抖函数并不会立即执行，而是会等待一段指定的时间。如果在这段时间内该事件再次被触发，则会取消之前设定的执行计划，并重新开始计时。这样，只有当事件停止触发并经过了预设的时间后，才会真正执行。通过防抖，可以避免在用户快速连续地进行操作时（例如连续快速点击按钮），服务器或浏览器因为接收到过多无意义的重复请求而造成的性能瓶颈，从而提高页面性能和用户体验。
debounce-promise:创建 Promise 返回函数的去抖动版本
08-05
去抖动承诺 创建 Promise 返回函数的去抖动版本 安装 npm i -S debounce-promise 使用示例 var debounce = require ( 'debounce-promise' ) function expensiveOperation ( value ) { return Promise . resolve ( value ) } var saveCycles = debounce ( expensiveOperation , 100 ) ; [ 1 , 2 , 3 , 4 ] . forEach ( num => { return saveCycles ( 'call no #' + num ) . then ( value => { console . log ( value ) } ) } ) // Will only c
JavaScript性能优化利器：全面解析防抖（Debounce）与节流（Throttle）技术、应用场景及Lodash、RxJS、vueuse/core Hook等高效第三方库实践攻略
JINGWHALE
05-01 2481
本文详细介绍了防抖（Debounce）与节流（Throttle）技术的概念、应用场景以及Lodash、RxJS、vueuse/core Hook等高效第三方库实践攻略。JavaScript中的防抖（Debounce）与节流（Throttle）是用来优化高频率事件处理的策略。防抖减少连续触发，节流控制执行频率。
防抖函数Debounce实现
Free雅轩的博客
12-20 2937
实现原理就是利用定时器，函数第一次执行时设定一个定时器，之后调用时发现已经设定过定时器就清空之前的定时器，并重新设定一个新的定时器，如果存在没有被清空的定时器，当定时器计时结束后触发函数执行。 手写一个 debounce 防抖函数 debounce 指的是某个函数在某段时间内，无论触发了多少次回调，都只执行最后一次。 // fn 是需要防抖处理的函数 // wait 是时间间隔 function debounce(fn, wait = 50) { // 通过闭包缓存一个定时器 i
debounce函数去抖实现
a8725585的博客
03-27 936
限制函数调用频率，快速点击时，限制其一定时间内只触发一次事件，如ajax提交，连续点击提交按钮，会发送多次请求，使用去抖可以避免多次重复请求 简介 debounce(fun, delay, immediate) 当调用函数n秒后，才会执行该动作，若在这n秒内又调用该函数则将取消前一次并重新计算执行时间 原理 参数 func - 函数 delay - 延时 immediate - 立即执行 ...
js函数节流和防抖的理解与实现
WonderGlans的博客
09-17 261
一：函数防抖 1、理解：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间 2、思路：每次触发事件时都取消之前的延时调用方法 3、实现： function debounce(fn) { let timeout = null; // 创建一个标记用来存放定时器的返回值 return function () { clearTimeout(timeout); // 每当用户输入的时候把前一个 setTimeout clear 掉 timeout = setT
性能优化之防抖函数---debounce
weixin_33890499的博客
05-08 185
在页面上的某些事件触发频率非常高，比如滚动条滚动、窗口尺寸变化、鼠标移动等，如果我们需要注册这类事件，不得不考虑效率问题。而防抖函数就是为了解决这一类问题而出现的。 前言 在页面上的某些事件触发频率非常高，比如滚动条滚动、窗口尺寸变化、鼠标移动等，如果我们需要注册这类事件，不得不考虑效率问题。 当窗口尺寸发生变化时，哪怕只变化了一点点，都有可能造成成百上千次对处理函数的调用，这对...
js防抖debounce和节流throttling详解
DZQ1223的博客
07-10 297
防抖和节流对于我们前端的性能优化上来说是一个必不可少的部分，也是面试出现频率极高的问题。本文将从防抖节流概念开始，到具体实现的代码解析，一步一步讲述如何实现防抖节流。防抖和节流相同点：防抖和节流都是为了阻止操作高频触发，从而浪费性能。防抖和节流区别：防抖是触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。适用于可以多次触发但触发只生效最后一次的场景。节流是高频事件触发，但在n秒内只会执行一次，如果n秒内触发多次函数，只有一次生效，节流会稀释函数的执行频率。使用场景。
函数防抖debounce/函数节流throttle
chenhqcc的博客
11-06 420
函数防抖debounce 函数节流throttle 函数防抖：将几次操作合并为一此操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发 函数节流：使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数 var timeout = null function deboun...
js防抖 代码实现
08-21
要实现JS防抖的代码，可以参考以下步骤： 1. 创建一个防抖函数，命名为`debounce`，该函数接收两个参数：要执行的函数`func`和延迟时间`delay`。 2. 在`debounce`函数内部创建一个变量`timer`用来保存定时器的ID。 3...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值