页面防抖事件

前言

　　像页面的按钮可能会被多次点击或者触发几秒内触发数十次的滚动事件，这种情况对前端的性能是非常不利的，尤其按钮会请求后端接口，这样对后端服务器的性能影响也非常大，因此这边提供一种思路浏览器短时间只能触发一次事件。

 

　　如果我们要按钮只能在5秒内点击一次，很多人第一反应就是设置定时器，但是定时器对浏览器性能消耗是比较大的，能不用最好不用使用，我们这边完全可以写一个方法来代替；

let antiShake = {};

  function restrict(e,next) {
    let date = new Date();
    if(!antiShake[`butName-${e.name}`]) antiShake[`butName-${e.name}`] = 0;
    if((antiShake[`butName-${e.name}`] <= 0) || (date.getTime() - antiShake[`butName-${e.name}`] > 5000)) {//设置每隔5s才能点击一次
      antiShake[`butName-${e.name}`] = date.getTime();
      next();//触发下一个方法
    }
  }

  function add() {
    console.log('愿世界和平不再有战争');
  }

上面的restrict方法完全可以封装到js里面让全局使用，其他页面引入即可。注意：add是每个按钮执行的不同的方法，这个没必要封装。

 

　　下面的方法就是调用，今后引入封装restrict方法的文件，然后对应的按钮自己创建一个命名，再restrict(this,方法名)调用就可以啦，当然想要偷懒的话也可以不命名name，直接restrict(按钮名称不要重复,方法名)调用。

  <button onclick="restrict(this,add)" name="restrictButt1">点我1</button>
  <button onclick="restrict(this,add)" name="restrictButt2">点我2</button>
  <button onclick="restrict(this,add)" name="restrictButt3">点我3</button>

 

 这种方法下就可以区分按钮的事件，不用担心会影响其他按钮的功能；

 

总结

　　上面的js方法还能再优化，现在我们是自己命名一个方法名，但是我们可以通过dom操作手动赋值一个随机数或者当前时间给这个按钮当做name，下次点击的时候再判断其name去进行新旧时间的比较就可以了。

　　页面滚动事件的判断也是这种思路，甚至更简单，只需判断当前页面就好啦，不用像按钮一样担心影响其他按钮的点击事件。