防抖和节流是两种常用的优化高频率执行代码的技术，它们的目的都是为了减少事件触发时的计算资源浪费。
防抖(debounce)
在第一次触发事件时，不立即执行函数，而是给出一个期限值比如200ms，然后：
如果在200ms内没有再次触发滚动事件，那么就执行函数
如果在200ms内再次触发滚动事件，那么当前的计时取消，重新开始计时
效果：如果短时间内大量触发同一事件，只会执行一次函数。
代码实现
function debounce(fn, delay) { let timer = null //借助闭包 return function () { if (timer) { clearTimeout(timer) //进入该分支语句，说明当前正在一个计时过程中，并且又触发了相同事件。所以要取消当前的计时，重新开始计时 } timer = setTimeout(fn, delay) // 进入该分支说明当前并没有在计时，那么就开始一个计时 } }
监听浏览器滚动事件，返回当前滚条与顶部的距离
function showTop() { var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; console.log('滚动条位置：' + scrollTop); }
对于短时间内连续触发的事件（上面的滚动事件），防抖的含义就是让某个时间期限（如上面的1000毫秒）内，事件处理函数只执行一次。
window.onscroll = debounce(showTop, 1000)
节流(throttle)
类似控制阀门一样定期开放的函数，也就是让函数执行一次后，在某个时间段内暂时失效，过了这段时间后再重新激活
效果：如果一直拖着滚动条进行滚动，那么会以1s的时间间隔，持续输出当前位置和顶部的距离
代码实现
function throttle(fn, delay) { let valid = true return function () { if (!valid) { //休息时间 暂不接客 return false } // 工作时间，执行函数并且在间隔期内把状态位设为无效 valid = false setTimeout(() => { fn() valid = true; }, delay) } }
监听浏览器滚动事件，返回当前滚条与顶部的距离
function showTop() { var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; console.log('滚动条位置：' + scrollTop); }
如果一直拖着滚动条进行滚动，那么会以1s的时间间隔，持续输出当前位置和顶部的距离
window.onscroll = throttle(showTop, 1000)
应用场景
防抖在连续的事件，只需触发一次回调的场景有：
- 搜索框搜索输入。只需用户最后一次输入完，再发送请求
- 手机号、邮箱验证输入检测
- 窗口大小resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。
节流在间隔一段时间执行一次回调的场景有：
- 滚动加载，加载更多或滚到底部监听
- 搜索框，搜索联想功能
总结
- 防抖就像王者里的英雄回城，点一下回城，会倒计时，如果中途被打断，则会重新开始。
- 节流就像王者里的大招，点一下大招释放完，会倒计时，中途不受任何影响，倒计时结束，大招接着使用。
