本文主要介绍JS中的防抖和节流，并详细说明其功能。本文以文字描述和示例代码的形式给大家做了非常详细的介绍，有一定的参考价值。有需要的朋友可以参考一下。
概念
功能防抖(debounce)是指在一定时间内，当动作被连续频繁触发时，动作只会被执行一次，也就是说，当动作被调用n毫秒后，如果在n毫秒内再次调用该动作，执行时间将重新计算，因此短时间内的连续动作将永远只被触发一次。例如，如果你用手指按住一个弹簧，它不会反弹，直到你松手。
函数节流是指在一定时间内执行的操作只执行一次，也就是说预先设定一个执行周期，当调用动作的时刻大于等于执行周期时，执行动作，然后进入下一个新的周期。一个生动的例子是，如果拧紧水龙头，直到水以水滴的形式流出，你会发现每隔一段时间，就会有一滴水流出。
节流函数和去抖函数都是为了限制函数的执行频率，使得优化函数触发频率过高导致的响应速度跟不上触发频率，导致延迟、假死或停滞。
通过下面的示例代码来看看防抖和节流。
什么是防抖？什么是节流？让我们一起愉快地学习吧。
首先，什么是防抖：即事件在一定时间内只发生一次。比如你点按钮，你单身30年，1秒钟点无数次，他还是只会触发一次。比如你在页面中使用onkeyUp来监听用户在输入框中的输入，如果用户按住了一个6，那么监听事件不是一直被触发，浪费了一部分性能吗？然后我们在某个事件内进行监控，这意味着我会在一秒钟后看到你输入了多少个6，这样就简单多了。好了，解释清楚了，我们来看一下代码，让它更清楚。
！文档类型html
超文本标记语言
头
meta charset='UTF-8 '
标题防抖/标题
/头
身体
按钮id='去抖'防抖，防抖，防抖/按钮
脚本
window.onload=function () {
let obtn=document . getelementbyid('去抖')；//获取按钮
obtn.addEventListener('click '，debounceHandle(debounce)，false)；//侦听绑定事件
}
//防抖功能
函数去抖句柄(fn) {
设timer=null
返回函数(){
clearTimeout(定时器)；//如果有事件，则清除计时器
Timer=setTimeout(function(){ //如果不存在，启动定时器。
fn.call(this，arguments)；
},300)
}
}
//执行函数
函数去抖(){
Console.log('防抖，防抖，防抖')；
}
/脚本
/body
/html
上述函数在300毫秒内只会触发一个事件。总结：防抖是指当任务频繁触发时，只有当任务触发的间隔超过指定的间隔时，才会执行任务。
接下来节流是什么？如果一个页面中有任意数量的图片，那么可以使用延迟加载技术。惰性加载意味着监视滚动条的位置。如果用户一直滚动，那么事件监控总是会被触发，这也是对性能的浪费。那么节流就是在一定的时间间隔内触发一个事件。话不多说，先看代码。
！文档类型html
超文本标记语言
头
meta charset='UTF-8 '
标题限制/标题
风格
部门{
高度：5000px
}
/风格
/头
身体
分度，节流，节流/分度
脚本
window.onload=function () {
window . addevent listener(' scroll '，throttleHandle(throttle)，false)；//侦听绑定事件
}
//节流功能
函数throttleHandle (fn) {
设定时器=空，
booleanVal=true//声明一个变量标志进行判断
返回函数(){
如果(！booleanVal) {
返回
}//如果事件正在执行，则返回并将布尔值更改为false
booleanVal=false
//不执行该事件。创建事件。
timer=setTimeout(function() {
fn.apply(this，arguments)；
booleanVal=true//在事件执行后将布尔值改回
},300)
}
}
//执行函数
功能节流(){
var scroll num=document . document element . scroll top | | document . body . scroll top；
console . log(scroll num)；
}
/脚本
/body
/html
这样在一些特定的工作场景下，就可以利用防抖和节流来减少不必要的损失。最后一个问题，最后一句提到了不必要的损失，那么是什么损失呢？
总结
以上是边肖介绍的JS中防抖节流的详细说明。希望对你有帮助。如果您有任何问题，请给我留言，边肖将及时回复您。非常感谢您对我们网站的支持！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。