javascript事件节流和防抖

事件节流和防抖是为了解决开发过程中遇到性能问题，常见于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点赞是我的动力！