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

最新推荐文章于 2025-03-27 22:50:01 发布
最新推荐文章于 2025-03-27 22:50:01 发布
阅读量1.9k 收藏 6
点赞数 25
分类专栏： JS 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Yan_Ting_Yan/article/details/106522546
版权

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

函数节流

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

函数防抖

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

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

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

【进阶篇】js的防抖节流函数
风中追风
10-09 3957
防抖和节流函数 阅读目录 一 .防抖函数 二 .节流函数 三 .个人理解两者的区别 一、防抖函数 1.1 概念： 　　触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。 1.2 使用场景： 　　就像是我的搜索栏功能，是在里面内容变化后就实时触发搜索事件，但是有时候我们输　　的内容很长，在没有输完的时候就触发了事件，这样对性能来说是不好的，造成了很多　...
技术面 - 八股文整理
热门推荐
优快云
11-13 1万+
八股文整理
JS函数防抖和函数节流
忆初
05-15 411
JS函数防抖和函数节流问题引入问题1： 如果实现了dom拖拽功能，但是在绑定拖拽事件的时候发现每当元素稍微移动一点便触发了大量的回调函数，导致浏览器直接卡死，这个时候怎么办？问题2：如果给一个按钮绑定了表单提交的post事件，但是用户有些时候在网络情况极差的情况下多次点击按钮造成表单重复提交，如何防止多次提交的发生？为了应对如上场景，便出现了函数防抖和函数节流两个概念，总的来说：这两个方法是在时间...
JS 防抖与节流
最新发布
weixin_62971133的博客
03-27 1120
再比如监听输入框的输入，不应每次输入框内容变化都触发监听，应该是用户完成一段输入后再进行触发。事件会一直等到用户完成操作后一段时间在操作，如果一直操作，会一直不触发。比如说是一个按钮，点击就发送请求，如果一直点，那么请求就会一直发布出去。，保证在特定时间内至少执行一次，无论事件触发频率如何。节流就是减少流量，将频繁触发的事件减少，并每隔一段时间执行。这种结合方式综合了时间戳和定时器的优点，既能保证在开始时立即执行函数，又能在后续按照固定时间间隔执行。：事件触发之后，执行操作，然后设置一个定时器，在。
js中的函数防抖和函数节流
m0_52900946的博客
05-15 4290
1、什么是函数防抖和函数节流     防抖（debounce）和节流（throttle）都是用来控制某个函数在一定时间内执行多少次的技巧，两者相似不相同，基本思想都是某些代码不可以在没有间断的情况下连续重复执行 1.1 函数防抖 如果一个事件被频繁执行多次，并且触发的时间间隔过短，则防抖函数可以使得对应的事件处理函数，只执行最后触发的一次。函数防抖可以把多个顺序的调用合并成一次。 1.2 函数节流 如果一个事件被频繁触发多次，节流函数可以按照固定的频率去执行相应
JS 防抖和节流函数
mingugi_pigBrother的博客
05-10 466
1、防抖：在一定时间内，只执行最后一次任务 在事件被触发的N秒后再执行任务（回调函数），如果在这N秒内又触发事件，则重新计算： 当事件触发时，相应的响应处理函数不会立即被触发，而是等待一定的时间； 当事件密集触发时，函数的触发会被频繁的推迟； 只有等待了一段时间也没有事件触发，才会真正执行响应处理函数 function debounce (callback, time){ // 定义一个定时器 var timer = null; ..
js防抖和节流函数
suuntil的博客
04-23 236
//防抖 function debounce(fn, delay) { var timer = null; // return function () { // if (timer) clearTimeout(timer); // var _this = this; // var _arguments = arguments; // timer = setTimeout(function () { // .
三分钟学前端JS篇.pdf
06-06
- 回调函数防抖和节流：防抖是指在高频事件触发后，事件处理函数只会执行一次，如果在同一时间内高频事件再次触发，则重新计算等待时间。节流则是将频繁触发的事件限制在一定时间内只触发一次。 2. 异步编程 - ...
三分钟学前端JS精华知识点总结
5. **函数防抖（debounce）和节流（throttle）**：这两个技术用于优化频繁触发的函数，防抖确保函数在一定时间间隔后才执行，节流则是限制函数的执行频率。 6. **柯里化（Currying）**：柯里化是一种将接受多个参数...
面经 - 记一次巨人网络的一面(二面稍后更新)
前端攻城狮Dannis
07-18 1723
笔者最近也是因为一些个人问题选择了跳槽, 巨人网络的内推, 来了一面的视频面试, 面完了以后想着自己也想写个面试模块, 把自己的一些面试经历遇到的问题都总结一下, 也希望能够给大家提供一些帮助 基本上是真实对话还原, 所以字会比较多 面试官: 付金权你好, 我是巨人网络xx事业部的前端工程师,也是此次的一面面试官, 我叫xxx。 我: 你好。 面试官: 用三分钟简单介绍一下自己吧 我: 略 面试官: 好的, 收到, 这边我看你简历上有写道你熟悉vue全家桶和react全家桶, 那么你怎.
js 防抖函数和节流函数
godev的博客
08-09 682
首先防抖是为了: 防止函数多次调用; 假设一个用户一直在触发某个事件函数, 且每次触发函数的时间间隔小于delay, 那么防抖就会只调用一次; 或者这样理解: 点击的事件函数在一段时间后才执行, 如果这段时间之内再次被点击调用的话, 那么就会重新计算执行时间......
JS防抖函数和节流函数
扛麻袋的少年的博客
07-01 1668
JS 防抖函数和节流函数   在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。 通常这种情况下我们怎么去解决的呢？一般来讲，防抖 和 节流 是比较好的解决方案。 让我们先来看看在事件持续触发的过程中频繁执行函数是怎样的一种情况。 html 文件中代码如下： <div id="content" style="height:150px;line-height:150px;t
js函数防抖和节流
yinge0508的博客
03-21 800
防抖和节流
js 函数防抖(debounce)与节流(throttle)
青蛙king的博客
07-21 4755
一、函数防抖 二、函数节流
Javascript函数防抖与节流
a5161586的博客
10-19 3170
日常操作中我们经常会遇到短时间内频繁触发的事件，类似于： window的onscroll、resize事件 input中onchange或oninput事件 这种耗费性能的事情，很可能造成浏览器的卡顿，甚至崩溃。可通过函数防抖和节流来避免这种情况。 函数防抖（Debounce） ...
js函数防抖和函数节流
肖帅的博客
11-03 330
js函数防抖和函数节流函数 函数防抖(debounce.js)：就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。 函数节流（throttle.js）：就是指连续触发事件但是在 n 秒中只执行一次函数。 debounce.js /** * 函数防抖 * 函数被频繁调用时使用 * 使用方法参考lodash 的 debounce 函数 * @author lzs */ const freeGlobal = typeof global == 'ob
史上最简单openwrt教程!三分钟三步搞定!碉堡了
09-06
OpenWrt是一个基于Linux的嵌入式操作系统，用于路由器和其他嵌入式设备。它提供了丰富的功能和自定义选项，但对于一些用户来说，在配置和安装上可能稍显复杂。以下是一个简化的OpenWrt安装教程，只需要三分钟和三个简单的步骤即可完成。 第一步，准备工作。首先，确保你拥有兼容OpenWrt固件的路由器设备，并且已连接好电源和网络线。其次，访问OpenWrt官方网站，下载适用于你的路由器型号和版本的固件文件。将该文件保存到你的计算机上。 第二步，进入路由器管理界面。打开你的浏览器，并在地址栏中输入“192.168.1.1”这个默认的路由器管理IP地址。如果你的路由器IP地址有所不同，请查阅相关的资料。在登录界面输入默认的用户名和密码，通常为“root”和“admin”。登录成功后，你将进入路由器的管理页面。 第三步，安装OpenWrt固件。在路由器管理页面中，找到“系统设置”或“固件升级”等类似选项。点击“浏览”按钮，选择之前下载好的OpenWrt固件文件，并点击“安装”或“升级”按钮。等待数分钟，直到固件文件安装完成并路由器自动重启。 通过以上三个简单的步骤，你就可以完成OpenWrt的安装了。安装完成后，你可以进一步在管理界面中自定义设置、添加插件和配置网络等。请注意，在进行任何操作前，务必备份你的路由器配置和数据，以免造成不可挽回的损失。有需要时，也可以参考官方文档和社区论坛，深入了解和利用OpenWrt的更多功能。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值