共计 1047 个字符，预计需要花费 3 分钟才能阅读完成。
事件节流和防抖是为了解决开发过程中遇到性能问题，常见于 onscroll、onresize，频繁点击 button 等
事件节流
设置一个时间间隔，时间间隔内只允许执行一次，好像客运站大巴，到点才会走。
问题：
多年前遇到过一个 onresize 问题，页面满屏布局，模块很多 dom 结构也相对复杂。所以在窗口频繁快速变化大小的时候页面反应异常卡顿。
解决办法：
说实话当初意识到是性能问题不过不知道怎么解决，搜索了很多相关问题，最后在 https://stackoverflow.com 找到 …，遗憾的是具体的链接忘了。不过也是因为这个问题宋词爱上了这个网站，问题答案很靠谱。
// 问题解决的原理就是事件节流
window.onresize = () => {
console.log(‘resize’)
}
随便晃几下执行了 150 多次, 这也就是卡顿的根源。
解决这个问题我们需要减少执行次数。
let timer = null
window.onresize = () => {
console.log(timer)
if (!timer) {
timer = setTimeout(() => {
callBack()
timer = null
}, 1000)
}
}
function callBack() {
console.log(‘resize’)
}
这样不管我们一秒内晃动多少次 callBack 只执行一次，问题解决接下在封装一下
// 封装前我们先思考一下，首先既然是封装那么事件不一定都是 onersize、间隔时间得有用户设置、callBack 得是用户写。
** 其实我们只关心 callBack，和执行间隔时间，恰好事件都有回调
function callBack() {
console.log(‘resize’)
}
function throttle(callBack, time) {
let timer = null
//timer 状态要常驻内存，这里做了一个闭包
return function() {
if (!timer) {
timer = setTimeout(() => {
callBack()
timer = null
}, time)
}
}
}
window.addEventListener(‘resize’, throttle(callBack, 1000), false)
测试完美！
防抖
常用于验证码防刷，按钮频繁点击导致发起多次请求给服务端造成压力，代码策略是，一段时间内事件统一处理，防抖原理类似 趴活的黑车，永远喊得就差一位上车就走，等你上去他接着喊就差一位上车就走。。。擦有点乱 看代码吧
待续。。。
您的吐槽 or 点赞是我的动力！
