速进！！！三分钟带你认识JS函数节流和函数防抖的作用！

最新推荐文章于 2022-08-09 12:00:25 发布
原创 最新推荐文章于 2022-08-09 12:00:25 发布 · 2k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript

本文详细解析了函数节流和函数防抖的概念及应用场景。函数节流限制了一段时间内只能触发一次操作，适用于类似指纹打卡的场景；而函数防抖则用于计划在一段时间后执行任务，若期间再次触发则重新计时，常用于搜索框输入后的延迟查询。两者均通过闭包实现，有效减少代码冗余并避免全局变量污染。

js函数节流和函数防抖的作用

函数节流

一段时间，只能触发一次，再触发就忽略掉，如一分钟之内多次指纹打卡。
在这里插入图片描述
注* +new Date()相当于new Date().getTime() //当无参数时，括号可以省略。

函数防抖

计划在一段时间后执行某任务，如果在这段时间内又一次触发，则重新等待，如搜索时，会在输入停止1s后到后台搜索，如果在1s内再次输入，重新计时。

在这里插入图片描述
最后运行起来代码如下：
在这里插入图片描述
由此可得，节流是第一次，防抖是第五次。它们都是要用闭包，这样就可以降低代码冗余度也可以防止全局变量污染作用域。

看到这里，希望对我们有帮助哈，一起加油！！！

js 函数防抖(debounce)与节流(throttle)
青蛙king的博客
07-21 4881
一、函数防抖 二、函数节流
我敢说，很多硬件工程师和射频工程师没有真正理解有源器件和无源器件，三分钟钟带你吃透！
最新发布
2401_86482345的博客
08-10 1762
有源器件和无源器件在电子电路中各有其独特的作用。有源器件以其强大的信号处理能力为电路提供动力，而无源器件则以其稳定、可靠的特性为电路提供基础支撑。这两者的结合使得电子电路能够实现更加复杂且多样化的功能。
JS函数防抖和函数节流
忆初
05-15 457
JS函数防抖和函数节流问题引入问题1： 如果实现了dom拖拽功能，但是在绑定拖拽事件的时候发现每当元素稍微移动一点便触发了大量的回调函数，导致浏览器直接卡死，这个时候怎么办？问题2：如果给一个按钮绑定了表单提交的post事件，但是用户有些时候在网络情况极差的情况下多次点击按钮造成表单重复提交，如何防止多次提交的发生？为了应对如上场景，便出现了函数防抖和函数节流两个概念，总的来说：这两个方法是在时间...
js中的函数防抖和函数节流
m0_52900946的博客
05-15 4365
1、什么是函数防抖和函数节流     防抖（debounce）和节流（throttle）都是用来控制某个函数在一定时间内执行多少次的技巧，两者相似不相同，基本思想都是某些代码不可以在没有间断的情况下连续重复执行 1.1 函数防抖 如果一个事件被频繁执行多次，并且触发的时间间隔过短，则防抖函数可以使得对应的事件处理函数，只执行最后触发的一次。函数防抖可以把多个顺序的调用合并成一次。 1.2 函数节流 如果一个事件被频繁触发多次，节流函数可以按照固定的频率去执行相应
JS 防抖和节流函数
mingugi_pigBrother的博客
05-10 505
1、防抖：在一定时间内，只执行最后一次任务 在事件被触发的N秒后再执行任务（回调函数），如果在这N秒内又触发事件，则重新计算： 当事件触发时，相应的响应处理函数不会立即被触发，而是等待一定的时间； 当事件密集触发时，函数的触发会被频繁的推迟； 只有等待了一段时间也没有事件触发，才会真正执行响应处理函数 function debounce (callback, time){ // 定义一个定时器 var timer = null; ..
js防抖和节流函数
suuntil的博客
04-23 253
//防抖 function debounce(fn, delay) { var timer = null; // return function () { // if (timer) clearTimeout(timer); // var _this = this; // var _arguments = arguments; // timer = setTimeout(function () { // .
三分钟带你认识区块链!最简单易懂的解释来了!.doc
07-25
区块链
三分钟让你电脑速度提高三倍30秒清理电脑所有垃圾!!!!!!.pdf
12-26
根据给定文件的标题与描述，“三分钟让你电脑速度提高三倍30秒清理电脑所有垃圾!!!!!!.pdf” 主要关注的是如何通过清理系统中的垃圾文件来提升电脑性能。文件中提到，在Windows操作系统下，日常使用会产生大量的临时...
精选资源
三分钟带你搞懂运算放大器与比较器的区别
01-20
　先看一下它们的内部区别图:　从内部图可以看出运算放大器和比较器的差别在于输出电路。运算放大器采用双晶体管推挽输出，而比较器只用一只晶体管，集电极连到输出端，发射极接地。　比较器需要外接一个从正电源端...
js 防抖函数和节流函数
godev的博客
08-09 719
首先防抖是为了: 防止函数多次调用; 假设一个用户一直在触发某个事件函数, 且每次触发函数的时间间隔小于delay, 那么防抖就会只调用一次; 或者这样理解: 点击的事件函数在一段时间后才执行, 如果这段时间之内再次被点击调用的话, 那么就会重新计算执行时间......
JS防抖函数和节流函数
扛麻袋的少年的博客
07-01 1720
JS 防抖函数和节流函数   在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。 通常这种情况下我们怎么去解决的呢？一般来讲，防抖 和 节流 是比较好的解决方案。 让我们先来看看在事件持续触发的过程中频繁执行函数是怎样的一种情况。 html 文件中代码如下： <div id="content" style="height:150px;line-height:150px;t
js函数防抖和节流
yinge0508的博客
03-21 822
防抖和节流
Javascript函数防抖与节流
a5161586的博客
10-19 3298
日常操作中我们经常会遇到短时间内频繁触发的事件，类似于： window的onscroll、resize事件 input中onchange或oninput事件 这种耗费性能的事情，很可能造成浏览器的卡顿，甚至崩溃。可通过函数防抖和节流来避免这种情况。 函数防抖（Debounce） ...
js函数防抖和函数节流
肖帅的博客
11-03 348
js函数防抖和函数节流函数 函数防抖(debounce.js)：就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。 函数节流（throttle.js）：就是指连续触发事件但是在 n 秒中只执行一次函数。 debounce.js /** * 函数防抖 * 函数被频繁调用时使用 * 使用方法参考lodash 的 debounce 函数 * @author lzs */ const freeGlobal = typeof global == 'ob
js实用功能----防抖
qq_44197554的博客
02-26 205
今天记录一个很实用的功能-----防抖，这个操作我想是很常用的了，例如，在百度搜索东西的时候，输入完之后才会显示出来列表，也就是隔一段时间再进行搜索，而不是输入一个单词发送一次网络请求，这样对浪费性能。 防抖就像是生活中乘坐公交车一样，每到一个站台，都是等人上完之后才关门开车，而不是上一个人就关一次门，防抖的原理也是如此。 如果不使用防抖会是什么情况呢，看下面的例子 无论你输入的速度有多快，都会...
js防抖函数和节流函数简析
cs840610862的博客
03-06 267
防抖函数 防抖技术即是可以把多个顺序地调用合并成一次，也就是在一定时间内，规定事件被触发的次数。 // 防抖动函数示例 function debounce(func, wait, immediate) { // 定时器变量 var timeout; return function() { // 每次触发 scroll handler 时先清除定时器 ...
史上最简单openwrt教程!三分钟三步搞定!碉堡了
09-06
OpenWrt是一个基于Linux的嵌入式操作系统，用于路由器和其他嵌入式设备。它提供了丰富的功能和自定义选项，但对于一些用户来说，在配置和安装上可能稍显复杂。以下是一个简化的OpenWrt安装教程，只需要三分钟和三个简单的步骤即可完成。 第一步，准备工作。首先，确保你拥有兼容OpenWrt固件的路由器设备，并且已连接好电源和网络线。其次，访问OpenWrt官方网站，下载适用于你的路由器型号和版本的固件文件。将该文件保存到你的计算机上。 第二步，进入路由器管理界面。打开你的浏览器，并在地址栏中输入“192.168.1.1”这个默认的路由器管理IP地址。如果你的路由器IP地址有所不同，请查阅相关的资料。在登录界面输入默认的用户名和密码，通常为“root”和“admin”。登录成功后，你将进入路由器的管理页面。 第三步，安装OpenWrt固件。在路由器管理页面中，找到“系统设置”或“固件升级”等类似选项。点击“浏览”按钮，选择之前下载好的OpenWrt固件文件，并点击“安装”或“升级”按钮。等待数分钟，直到固件文件安装完成并路由器自动重启。 通过以上三个简单的步骤，你就可以完成OpenWrt的安装了。安装完成后，你可以进一步在管理界面中自定义设置、添加插件和配置网络等。请注意，在进行任何操作前，务必备份你的路由器配置和数据，以免造成不可挽回的损失。有需要时，也可以参考官方文档和社区论坛，深入了解和利用OpenWrt的更多功能。
评论 7
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值