JavaScript-防抖函数的实现

最新推荐文章于 2024-06-27 13:36:25 发布
最新推荐文章于 2024-06-27 13:36:25 发布
阅读量414 收藏
点赞数 1
分类专栏： JavaScript 文章标签： javascript 前端 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42181069/article/details/121928573
版权

1、对防抖函数该怎么理解

日常小案例：

老师在上完课后给大家【五分钟】询问大家有没有什么问题要问

如果在【五分钟】时间内，没有问题要问，那么就下课了(相当于执行事件了）

如果在此期间，小非来问 问题，并且帮她解答了，解答完后，会再等【五分钟】看看还有没有别的同学问问题

如果在此期间，小凡来问 问题，并且帮她解答了，解答完后，会再等【五分钟】看看还有没有别的同学问问题

如果我等待超过了5分钟，那么就下课了(相当于执行事件了）

所以用三句话理解就是：

  1. 当事件触发时，相应的函数并不会立即触发，而是 会等待一定的时间
  2. 当事件密集触发时，函数的触发会被频繁的推迟
  3. 只有等待了一段时间也没有事件触发，才会真正的执行响应函数

2、防抖的应用场景

  • 输入框中频繁的输入内容，搜索或者提交信息
  • 频繁的点击按钮，触发某个事件
  • 监听浏览器滚动事件，完成某些特定操作
  • 用户缩放浏览器的resize事件

3、防抖的简单实现

//简单实现
functi
最低0.47元/天 解锁文章
小斯不斯
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
防抖函数的实现
孙叫兽的博客
11-18 6967
防抖函数的定义是当事件触发完成之后再延迟触发，并且只触发一次；如果在触发完成之前再次触发，则会再次刷新延迟；简单理解为（如果事件不触发即不执行，并且只会执行一次，就是定时器最后走的那一次） 　举个例子：假如有个弹簧，你一直往下按压只要你不松手就是不会弹出的，弹簧只有在你松手的那一瞬间才会弹出去；防抖函数也是如此，只要事情触发没有结束是不会执行的，只有在事件触发结束后延迟执行一次； //定义方法即要做的事情 function fun(){ console.log('onresize') ..
防抖c语言,花式解说防抖函数debounce的实现
weixin_39601929的博客
05-20 621
歪式絮叨：原本打算只用一篇文章总结下防抖和节流的，但是写着写着发现挺有意思的。所以准备会分成 3-4 篇来写了，单独的防抖和节流的实现，然后在去分享一下知名库的源码。今天先跟歪马一起看看防抖的实现吧。其他内容敬请期待~！歪老师：“马同学，防抖和节流你知道吗？起来说一下。”马同学：“老师，我不知道呀，都没听说过。”歪老师：“好吧，那今天我们就先来讲讲防抖吧。先从基本的概念以及使用场景说起”。一、概念...
手把手教你实现一个防抖函数(debounce)
fang_my的博客
11-30 5557
闭包不另开一篇文章讲解是讲不完的，并且阮一峰阮大的闭包讲解的已经很好了，我就不献丑了） 对于现在的场景简单来说，你可以这样理解。那么我们的 防抖 函数在这里的作用其实就是帮你把这个函数包装一下的意思，它并不会直接影响这个函数的内部逻辑，就像你的礼物包装一层包装纸🎁后，它本身是没有发生任何变化的。我仅仅只是想最后搜索 hanzhenfang 这几个关键词，但是我在输入每一个字符的时候，都会去后端请求一次，数据量小还好，如果数据量过大的话，由于前几次的请求都是毫无意义的，势必会造成性能和资源上的浪费。
【从基础概念到手写】防抖-节流函数的基本实现和补充
weixin_50926010的博客
05-18 733
【从基础概念到手写】防抖-节流函数的讲解和手写实现
JavaScript性能优化利器：全面解析防抖（Debounce）与节流（Throttle）技术、应用场景及Lodash、RxJS、vueuse/core Hook等高效第三方库实践攻略
最新发布
JINGWHALE
06-27 799
本文详细介绍了防抖（Debounce）与节流（Throttle）技术的概念、应用场景以及Lodash、RxJS、vueuse/core Hook等高效第三方库实践攻略。JavaScript中的防抖（Debounce）与节流（Throttle）是用来优化高频率事件处理的策略。防抖减少连续触发，节流控制执行频率。
如何实现一个防抖函数？
kiku
11-05 1705
在前端开发中会遇到一些频繁的事件触发，比如： window 的 resize、scroll mousedown、mousemove keyup、keydown …… 为此，我们举个示例代码来了解事件如何频繁的触发： <!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" conte
JS-防抖节流函数
苛性钠的博客
06-09 188
防抖节流函数有什么用？ 当用户疯狂点击按钮时，那个按钮被绑定了一些事件，就会疯狂触发事件的处理函数。 又不能阻止用户的疯狂行为，我们就要限制事件触发的频次。 如果用户鼠标结实，可以让他一直点下去，还不影响性能；就用到了防抖节流函数。 1.防抖 在用户疯狂点击的情况下，在点击结束后的规定时间内触发一次事件处理函数。 原理：使用一次性计时器，计时器是异步操作，用户的每一次点击会将debonce函数放进事件队列，当debonce函数执行的时候，会在指定时间之后将setTimeout的函数放进事件队列进行排队
JavaScript高级 函数防抖debounce
weixin_65257540的博客
03-09 257
验证用户的输入，在多少时间后才做某个事情 限制某一个方法的频繁触发。防止函数在极短的时间内反复调用，造成资源的浪费。 调用该函数后，不立即做事，而是一段时间后去做事 如果在等待时间内调用了该函数，则重新开始计时 这样的功能，就叫做函数防抖，其实就是防止函数短时间内被调用多次。要完成该函数，需要给予两个条件（参数）： 告诉我一段时间后要做什么事（这里应该是一个 callback，即函数作为参数） 告诉我要等待多长时间 代码 1、验证输入框的输入内容，防止函数多次调用。 2
javascript防抖函数debounce详解
10-16
以下是两种常见的防抖函数实现： **实现1**： ```javascript function debounce(fn, wait = 50) { let timer = null; return function(...args) { if (timer) clearTimeout(timer); timer = setTimeout(() => {...
js代码-防抖debounce实现
07-16
以下是一个简单的防抖函数实现示例： ```javascript function debounce(func, wait) { let timeout; return function() { const context = this; const args = arguments; clearTimeout(timeout); timeout = ...
js代码-防抖的实现
07-15
下面是一个简单的防抖函数实现示例： ```javascript function debounce(func, wait) { let timeout; return function() { const context = this; const args = arguments; clearTimeout(timeout); timeout = ...
js代码-防抖函数（立即执行和非立即执行）
07-15
JavaScript中的防抖函数（Debounce）是一种优化技术，用于限制函数在特定时间间隔内的执行次数。这在处理事件监听，如窗口滚动、输入框输入等高频触发的场景中非常有用，可以有效避免性能问题和不必要的计算。防抖...
JS中防抖函数介绍与实现（秒懂如何手写防抖）
百赢出品，必属精品
04-01 1463
函数防抖是一种用于限制函数执行频率的技术。在JavaScript中，函数防抖常用于处理频繁触发的事件，如浏览器窗口的resize事件、滚动事件、输入框的输入事件等。它通过延迟函数的执行来确保在一定时间内只执行一次。可以避免频繁触发事件造成不必要的资源消耗或执行结果混乱的情况，而只关注最后一次触发事件的结果。1.当事件被触发时，不立即执行事件处理函数，而是等待一段时间（延迟时间）。2.如果在这段时间内事件再次被触发，则重新计时，延迟时间重新开始计算。3.直到延迟时间内没有再次触发事件，才执行事件处理函数。
JS防抖函数的实现(巨详细,秒懂)
热门推荐
qq_63299825的博客
05-25 1万+
在一定的时间间隔内,如果没有再次触发该函数,那么才会去执行函数体内的代码(例如发送网络请求)。
JS高级——防抖函数
@SCY
02-26 2842
防抖函数具体实现过程
防抖的两种实现方法
qq_51387458的博客
04-01 528
防抖的两种实现方法
防抖函数JavaScript
m0_51658494的博客
04-11 6657
防抖函数 先总结下对防抖函数的理解： 防抖函数就是防止用户进行一些点击事件或者输入文字时，对应绑定的事件发生多次 比如我在点击后发送ajax请求，但是我联系按了两次，然后请求就发送了两次 或者在输入框中打字时候，还没有结束打字就已经发送了请求 （当然有些搜索框正需要这样的功能，但是也是需要限制，肯定也得等完整的字符输入才显示推荐） 防抖函数具体实现： 就是用一个函数把原本要执行的事件函数包裹起来，利用setTimeout函数来规定执行的时机，同时把原本绑定的事件函数获得的参数全部给这个函数，因为会涉及到t
input change 延时 防抖
葡萄味橙子的博客
05-23 2472
原作者: 零零博客 https://blog.ll00.cn/index.php/archives/62/ 让input propertychange事件时间延时执行 在使用input propertychange事件时，遇到一个问题。我输入一个字时，会重复执行五六次事件，事件里又包含了网络请求，体验非常差。经过搜索，找到了解决办法，详情如下。 代码 // 监听textarea的输入 $(do...
JavaScript 防抖函数的方法
08-03
### 回答1： JavaScript 防抖函数是一种在一段时间内阻止函数的执行的方法。它的原理是在执行函数之后设置一个定时器，在定时器到期之前如果再次触发函数的执行，就会重置定时器，直到定时器到期才会真正执行函数。这样可以有效地阻止频繁触发函数导致的性能问题。 下面是一个简单的 JavaScript 防抖函数的例子： ``` function debounce(fn, delay) { let timer = null; return function() { let context = this, args = arguments; clearTimeout(timer); timer = setTimeout(function () { fn.apply(context, args); }, delay); }; } ``` 在使用这个函数的时候，可以传入两个参数： - `fn`：要防抖的函数。 - `delay`：定时器的时间，单位为毫秒。 使用方法示例： ``` let myFunc = debounce(function() { console.log("防抖函数执行了"); }, 1000); // 在 1 秒内多次调用 myFunc 函数，只会在 1 秒后最后一次调用执行 myFunc(); myFunc(); myFunc(); ``` 需要注意的是，这个防抖函数是基于定时器实现的，所以在使用过程中可能会有一些精度问题。如果需要更精确的防抖函数，可以使用 requestAnimationFrame 函数来实现。 ### 回答2： JavaScript 中的防抖函数是一种应对频繁触发事件的一种优化技术。当一个事件频繁触发时，防抖函数可以限制事件的执行次数，从而提升性能和用户体验。 一个简单的防抖函数的实现方法是利用 setTimeout() 函数，在事件触发后设定一个时间间隔，并在该时间间隔之后执行事件的处理函数。如果在该时间间隔内事件再次触发，就清除原来的定时器并重新设置一个新的定时器。这样就可以保证在事件频繁触发时只执行最后一次触发的事件。 以下是一个例子，假设有一个按钮的点击事件需要防抖处理： ```javascript function debounce(func, wait) { let timeout; return function () { const context = this; const args = arguments; clearTimeout(timeout); timeout = setTimeout(function () { func.apply(context, args); }, wait); }; } const button = document.querySelector('button'); button.addEventListener('click', debounce(function () { console.log('Button clicked!'); }, 300)); ``` 在上述例子中，点击按钮时，如果在300毫秒内再次点击，防抖函数会清除之前的定时器并重新设置一个新的定时器。只有在按钮点击后的300毫秒内没有再次触发点击事件时，才会执行按钮点击事件的处理函数。 防抖函数是一个常见的前端开发技术，可以有效地控制事件的触发次数，减少不必要的计算和操作，提升网页性能和用户体验。 ### 回答3： JavaScript中的防抖函数是一种用于优化性能的技术，通过延迟函数执行来减少频繁触发的问题。防抖函数可以用来控制函数的执行频率，确保在一定的时间间隔内只执行一次函数。 一种常见的防抖函数的实现方式是使用setTimeout方法。具体步骤如下： 1. 创建一个变量timer用来保存setTimeout返回的定时器。 2. 在函数执行时判断timer是否存在，存在则清除定时器。 3. 再次调用setTimeout方法，延迟一定的时间执行函数。 4. 在规定的延迟时间内若再次触发函数则重新计时。 下面是一个使用setTimeout实现的防抖函数的示例： ```JavaScript function debounce(func, delay) { let timer; return function() { if (timer) { clearTimeout(timer); } timer = setTimeout(() => { func.apply(this, arguments); }, delay); }; } ``` 在上面的示例中，参数func为需要进行防抖操作的函数，delay为触发间隔的时间。 使用该防抖函数可以将一个需要频繁触发的函数进行优化，避免了频繁触发函数造成的性能问题。比如在输入框搜索时，可以使用防抖函数来减少请求的次数，提高用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值