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

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

#javascript

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

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

函数节流

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

函数防抖

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

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

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

【进阶篇】js的防抖节流函数
风中追风
10-09 3975
防抖和节流函数 阅读目录 一 .防抖函数 二 .节流函数 三 .个人理解两者的区别 一、防抖函数 1.1 概念： 　　触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。 1.2 使用场景： 　　就像是我的搜索栏功能，是在里面内容变化后就实时触发搜索事件，但是有时候我们输　　的内容很长，在没有输完的时候就触发了事件，这样对性能来说是不好的，造成了很多　...
技术面 - 八股文整理
最新发布
优快云
11-13 2万+
八股文整理
JS函数防抖和函数节流
忆初
05-15 427
JS函数防抖和函数节流问题引入问题1： 如果实现了dom拖拽功能，但是在绑定拖拽事件的时候发现每当元素稍微移动一点便触发了大量的回调函数，导致浏览器直接卡死，这个时候怎么办？问题2：如果给一个按钮绑定了表单提交的post事件，但是用户有些时候在网络情况极差的情况下多次点击按钮造成表单重复提交，如何防止多次提交的发生？为了应对如上场景，便出现了函数防抖和函数节流两个概念，总的来说：这两个方法是在时间...
js中的函数防抖和函数节流
m0_52900946的博客
05-15 4306
1、什么是函数防抖和函数节流     防抖（debounce）和节流（throttle）都是用来控制某个函数在一定时间内执行多少次的技巧，两者相似不相同，基本思想都是某些代码不可以在没有间断的情况下连续重复执行 1.1 函数防抖 如果一个事件被频繁执行多次，并且触发的时间间隔过短，则防抖函数可以使得对应的事件处理函数，只执行最后触发的一次。函数防抖可以把多个顺序的调用合并成一次。 1.2 函数节流 如果一个事件被频繁触发多次，节流函数可以按照固定的频率去执行相应
JS 防抖和节流函数
mingugi_pigBrother的博客
05-10 479
1、防抖：在一定时间内，只执行最后一次任务 在事件被触发的N秒后再执行任务（回调函数），如果在这N秒内又触发事件，则重新计算： 当事件触发时，相应的响应处理函数不会立即被触发，而是等待一定的时间； 当事件密集触发时，函数的触发会被频繁的推迟； 只有等待了一段时间也没有事件触发，才会真正执行响应处理函数 function debounce (callback, time){ // 定义一个定时器 var timer = null; ..
js防抖和节流函数
suuntil的博客
04-23 239
//防抖 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 1763
笔者最近也是因为一些个人问题选择了跳槽, 巨人网络的内推, 来了一面的视频面试, 面完了以后想着自己也想写个面试模块, 把自己的一些面试经历遇到的问题都总结一下, 也希望能够给大家提供一些帮助 基本上是真实对话还原, 所以字会比较多 面试官: 付金权你好, 我是巨人网络xx事业部的前端工程师,也是此次的一面面试官, 我叫xxx。 我: 你好。 面试官: 用三分钟简单介绍一下自己吧 我: 略 面试官: 好的, 收到, 这边我看你简历上有写道你熟悉vue全家桶和react全家桶, 那么你怎.
js 防抖函数和节流函数
godev的博客
08-09 695
首先防抖是为了: 防止函数多次调用; 假设一个用户一直在触发某个事件函数, 且每次触发函数的时间间隔小于delay, 那么防抖就会只调用一次; 或者这样理解: 点击的事件函数在一段时间后才执行, 如果这段时间之内再次被点击调用的话, 那么就会重新计算执行时间......
JS防抖函数和节流函数
扛麻袋的少年的博客
07-01 1695
JS 防抖函数和节流函数   在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。 通常这种情况下我们怎么去解决的呢？一般来讲，防抖 和 节流 是比较好的解决方案。 让我们先来看看在事件持续触发的过程中频繁执行函数是怎样的一种情况。 html 文件中代码如下： <div id="content" style="height:150px;line-height:150px;t
js函数防抖和节流
yinge0508的博客
03-21 805
防抖和节流
js 函数防抖(debounce)与节流(throttle)
青蛙king的博客
07-21 4805
一、函数防抖 二、函数节流
Javascript函数防抖与节流
a5161586的博客
10-19 3204
日常操作中我们经常会遇到短时间内频繁触发的事件，类似于： window的onscroll、resize事件 input中onchange或oninput事件 这种耗费性能的事情，很可能造成浏览器的卡顿，甚至崩溃。可通过函数防抖和节流来避免这种情况。 函数防抖（Debounce） ...
js函数防抖和函数节流
肖帅的博客
11-03 335
js函数防抖和函数节流函数 函数防抖(debounce.js)：就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。 函数节流（throttle.js）：就是指连续触发事件但是在 n 秒中只执行一次函数。 debounce.js /** * 函数防抖 * 函数被频繁调用时使用 * 使用方法参考lodash 的 debounce 函数 * @author lzs */ const freeGlobal = typeof global == 'ob
js实用功能----防抖
qq_44197554的博客
02-26 180
今天记录一个很实用的功能-----防抖，这个操作我想是很常用的了，例如，在百度搜索东西的时候，输入完之后才会显示出来列表，也就是隔一段时间再进行搜索，而不是输入一个单词发送一次网络请求，这样对浪费性能。 防抖就像是生活中乘坐公交车一样，每到一个站台，都是等人上完之后才关门开车，而不是上一个人就关一次门，防抖的原理也是如此。 如果不使用防抖会是什么情况呢，看下面的例子 无论你输入的速度有多快，都会...
史上最简单openwrt教程!三分钟三步搞定!碉堡了
09-06
OpenWrt是一个基于Linux的嵌入式操作系统，用于路由器和其他嵌入式设备。它提供了丰富的功能和自定义选项，但对于一些用户来说，在配置和安装上可能稍显复杂。以下是一个简化的OpenWrt安装教程，只需要三分钟和三个...
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值