节流与防抖,这两个词经常会出现在前端的应用中,很多时候我们只是该用的时候使用它,往往却不喜欢花时间理解亦或者是看到的逻辑较复杂,一时间无法记住重要的导致全部都被大脑清除掉了,所以我留下这个既不需要大费周章去理解,而简单看看就能很容易理解的记录
什么是节流与防抖?
节流:立即触发一次事件,在事件触发后的一段时间内再次触发事件不执行并且会将时间重置
let box = document.getElementById('box'); // 获取需要进行操作的dom元素
// 将dom元素设置事件监听
box.addEventListener('click', function() {
// 将行为与节流函数绑定
debounce(() => {console.log('111')}, 500);
})
// 创建节流操作
let timer = null; // 1.设置延时标签
function debounce(fn, delay) {
// 2.进入函数后,当定时器存在时将定时器清空,否则生成定时器
if (timer) {
clearInterval(timer);
}
// 3.重新生成延时器
timer = setTimeout(fn, delay);
}
这里的话我们只需要理解节流操作的第2步操作
当第一次进入函数后,延时器timer为空,那么我们会生成延时器
如果后续未在等待时间(delay)范围内再次触发节流操作,那么fn会被执行,控制台打印出111
如果后续在等待时间(delay)范围内再次触发节流操作,那么延时器会被清空,并且重新生成
防抖:在事件持续触发的情况下一段时间只会触发一次的事件
let box = document.getElementById('box'); // 获取需要进行操作的dom元素
// 将dom元素设置事件监听
box.addEventListener('click', function() {
// 将行为进行防抖函数绑定
throttle(() => {console.log('111')}, 1000);
})
// 创建防抖操作
let valid = true; // 1.创建验证
function throttle(fn, delay) {
// 2.如果验证未通过则弹出函数,不往下执行
if (!valid) {
return;
}
// 3.将验证设置为失效状态
valid = false;
// 4.设置延时器
setTimeout(() => { valid = true; fn(); }, delay)
}
这里的话我们只需要理解第2步
当第一次进入函数时 验证通过了 => 验证状态变为失效 => 执行延时器,
如果后续未在等待时间(delay)范围内再次触发防抖操作,那么fn会被执行,控制台打印出111,并且验证状态会变为有效
如果后续在等待时间(delay)范围内再次触发防抖操作,在验证为失效状态下触发函数会被弹出,反复执行第2步,直至延时器执行完毕才可再次进入第3步
此文章仅为个人简浅理解,不做深入研究,欢迎指正