防抖和节流
在dom操作中,在绑定事件触发频率上进行的控制
一、防抖【多次执行变成最后一次执行】
1、概念:等用户高频事件完了,再进行事件操作
(监听输入框的输入,不应该每次都去触发监听,应该是用户完成一段输入后在进行触发。)
2、流程:
事件触发-----开启定时器------再次触发,清除上次,重写一次-------定时到,触发操作
//fn 要进行防抖处理的函数
//delay间隔时间
function debounce(fn, delay) {
// 声明变量保存定时器
var timer = null
// 防抖处理后还是一个函数
return function () {
// 如果之前存在一个事件,就要清除
if (timer) {
clearTimeout(timer)
}
// 开启新的
timer = setTimeout(fn, delay)
}
}
// 给窗口绑定了滚动事件,只有滚动触发事件
window.addEventListener('scroll', debounce(getNum, 200))
二、节流【多次执行变成每隔一段时间执行】
1、概念:某个操作希望上一次的完成后再进行下一次,或者希望隔一段时间触发一次(控制事件触发频率)
(按钮,点击就发送,多次点击,多次发送;应该等上一次请求到再发送)
2、流程:
事件触发------执行操作------关闭阀门------阀门关闭,后续触发无效------一定时间后,阀门开启------操作再次触发
// fn 要处理节流的函数 // delay 间隔的时间 function throttle(fn, delay) { // 定义变量,保存定时器 var timer = null return function () { // 如果没有开启定时器,当前可以触发 if (!timer) { // 开启 timer = setTimeout(function () { // 调用fn fn() // 只有执行完了,设置为null,才允许执行下一次 timer = null }, delay)}
}
}
window.addEventListener('scroll', throttle(getNum, 500))