首先,节流和防抖都是用于不断触发事件的情况,比如onscroll事件,如果不设置节流和防抖,当你绑定onscroll事件并设置事件处理函数,你滑动滚轮就会执行n多次的事件处理函数,造成性能损耗。节流和防抖有时候也会应用在input keydown事件,根据具体情况选择节流还是防抖。
先简单解释一下节流和防抖的概念。
-
节流:当你不断触发某一事件时,每隔一个固定时间,执行一次你想要执行的代码。(为防止频繁触发事件而执行n多次的代码)
-
防抖:停止触发事件之后的固定时间间隔内不再触发事件,才执行一次事件处理函数。(即当你不断触发某一事件时只执行最后一次代码)
(如果固定时间间隔内事件内再次触发事件,则重新计算时间。) -
节流代码
var flag = true //节流阀默认为true
window.onscroll = function () { //触发事件后代码执行第一次
if (flag === false) return // 节流阀闭合则不执行
flag = false // 来到这里即开关打开状态,现在关掉开关以免重复执行
console.log('执行一次')
setTimeout(() => { //为防止频繁触发,用延迟器来设置时间间隔
flag = true //0.5秒后打开开关
}, 500) //若事件被极频繁触发,也能保证至少等待0.5秒再执行下一次
//的事件处理函数
}
- 防抖代码
var timer = null //准备一个timer变量来操作定时器
window.onscroll = function () {
clearInterval(timer) //触发事件就清除掉已有定时器
//保证了一定时间间隔内只执行一次事件处理函数
//而这个时间间隔就是下边延时器的500ms
timer = setTimeout(() => { //设置延时器
console.log('触发')
}, 500) //0.5秒内不触发该事件,则执行一次延时器内代码
}