防抖和节流其实是属于性能优化的范畴 但因为触发频率非常高 如果放任不管或者处理不当就很容易引起浏览器卡死，所以还是很有必要掌握这个知识的。
频率高的监听
很多监听默认的执行频率都非常高 1s会执行3-4次的样子 如:滚动条的监听 视频播放的监听...
实际上我们并不需要这么高频率的反馈，毕竟浏览器性能是有限的，接下来我们看一下如何优化监听滚动做返回顶部的场景
function showTop () { var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; console.log('滚动条位置：' + scrollTop); } window.onscroll = showTop 这个就是没优化之前的返回顶部
防抖(deBounce)
第一种思路：在第一次触发事件的时候，不立即去执行函数，给一个时间比如500ms，然后：
如果500ms没有再次触发这个事件就执行接下来的操作
如果500ms之后又触发监听函数，那当前的计数取消重新开始计时(这种可能满足不了隔多久一执行的情景)
效果：如果短时间内大量触发同一事件，只会执行一次函数
实现：计时的关键就在于setTimeout函数，由于还需要一个变量保存计时，考虑维护全局环境纯净，可以借助闭包实现
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);
}
window.onscroll = debounce(showTop,1000) // 为了方便观察效果我们取个大点的间断值，实际使用根据需要来配置
此刻会发现 只有在滚动停止1s以后 才会打印滚动条所在位置
至此，把防抖差不多实现了，现在给出定义：对于短时间内连续触发的事件(上面的滚动事件)，防抖的含义就是让某个时间范围内，事件函数只执行一次。
节流(throttle)
使用上面的防抖方案处理的结果是：如果在限定时间段内，不断触发滚动事件，只要不停止触发，那永远不会输出滚动条所在的位置。
期望：即使用户一直来回拖动滚动条，也希望隔断时间输出滚动条所在位置呢
效果：如果短时间内大量触发同一事件，那么在函数执行一次后 在某个时间段内暂时失效 过了这个时间重新生效
实现：这里借助setTimeout来实现，加一个变量来判断现在是否是生效状态
function throttle(fn,delay){
let valid = true
return function() {
if(!valid){
//失效状态
return false
}
// 工作时间，执行函数并且在间隔期内把状态位设为无效
valid = false
setTimeout(() => {
fn()
valid = true;
}, delay)
}
}
/* 请注意，节流函数并不止上面这种实现方案,
例如可以完全不借助setTimeout，可以把状态位换成时间戳，然后利用时间戳差值是否大于指定间隔时间来做判定。
也可以直接将setTimeout的返回的标记当做判断条件-判断当前定时器是否存在，如果存在表示还在冷却，并且在执行fn之后消除定时器表示激活，原理都一样
*/
// 以下照旧
function showTop () {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
console.log('滚动条位置：' + scrollTop);
}
window.onscroll = throttle(showTop,1000)
运行上述代码的结果是：如果一直拖动滚动条那么会以1s的时间间隔输出当前滚动条所在的位置
