防抖（debounce）和节流（throttle）函数之防抖函数

 前端项目中，防抖和节流实际上遇到的频率特别的高，因为浏览器的性能是有限的，为了达到性能优化的目的，所以防抖节流的知识还是早点掌握好一点。

function top() { var top = document.documentElement.scrollTop || document.body.scroolTop console.log(top) }; window.onscroll = top

鼠标滚轮轻轻一滚动，会发现事件已经打印了这么多次，这个时候就会发现一个问题，这个函数的默认执行效率太高了，我们完全不用这么浪费浏览器的性能。（执行效率高到按一下键盘的向下方向键就会打印8-9次的地步） 然后我们用防抖函数来优化它

function top() { let top = document.documentElement.scrollTop console.log(`滚动条的位置：${top}`) }; function debounce(fn, wait) { let timer = null return function() { if (timer) { //如果进入这里，定时器已经在执行了，并且重新触发了这个计时器，那就清除，在重新计时 clearTimeout(timer) } timer = setTimeout(fn, wait) } } window.onscroll = debounce(top,1000)

对于短时间内连续触发的函数，防抖的含义是让某个时间段里面，事件处理的函数只执行一次