防抖和节流

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