在前端中有一些事件会频繁的触发容易造成页面卡顿，例如：window 的 resize、scroll、mousedown、mousemove、keyup、keydown等事件。
js抖动的原因：短的时间内多次连续触发事件，首先会十分影响性能，同时大量运行结果被集中输出，结果之间不规律的冲突变化导致页面抖动。
防抖实现原理
限制下次函数调用之前必须等待的一段事件，如果事件在不断的触发就不断的重置这个等待事件，等到操作完毕不在触发事件的时候，此时在执行事件。比如window 下的scroll事件，当你滚动的时候scroll事件是不断地被触发的，而实际上需要的结果是在滚动停止的位置，其余的都属于一个过程阶段，没有必要去触发事件。
function debounce(fn,wait){
var timer = null;
return function(){
if(timer !== null){
clearTimeout(timer);
}
timer = setTimeout(fn,wait);
}
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
以上就是js防抖功能的实现，只要调用debounce(fn,wait)即可，其中fn是你需要执行的函数的名称，wait是触发事件的时间间隔。下面就按window下的scoll事件为例，可以根据实际的业务需求来选择触发方式来调用debounce(fn,wait)，js防抖函数。
function yourFunction(){
//需要执行的功能
console.log("潘某人seo")
}
window.addEventListener("scroll",debounce(yourFunction,1000));
1
2
3
4
5
2
3
4
5
上述代码就是实现了，scroll事件的js防抖功能，实现的效果则是，只要鼠标在滚动也就是scroll事件一直在触发，就不会执行目标函数yourFunction，只有当鼠标停止滚动超过了wait事件1000ms，才会执行函数yourFunction，输出一次“潘某人SEO”，而不是鼠标滚动一下就输出一遍“潘某人SEO”。
