防抖和节流

在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))

 

posted @ 2023-06-12 17:47  有只小菜猫  阅读(41)  评论(0)    收藏  举报