JavaScript节流函数, 防止大量函数触发解决办法

理由

有时候开发者会需要注册一些回调函数在浏览器的scroll和resize事件上, 但是scroll和resize这类事件触发非常频繁, 而实际用户并不需要感知这么多的事件产生, 造成大量函数触发, 而如果这些函数和动画有关, 会给浏览器造成巨大压力, 节流函数可以很好的解决这个问题.

节流函数原理是设置一个阈值, 在一定时间内的触发但并不真实调用函数, 从而做到性能的优化, 实现的方式有反跳和节流. 反跳是调用动作n毫秒内, 才会执行该动作, 若在n毫秒内又调用此动作将重新计算时间. 节流则是先设置一个执行周期, 当调用的时刻大于等于执行周期时则执行并进入下一个周期, 下面是一个反跳函数的例子.

代码

function debounce(idle, func) {//接收两个参数, 间隔时间和实际调用函数
  let last;//保存异步调用实际函数, 通过闭包赋值不被销毁
  return function () {
    let ctx = this,//存放函数this, 和变量给下面函数使用
        args = arguments;
    clearInterval(last);//如果该函数被调用, 则清除上一个异步调用的实际函数
    last = setTimeout(function () {//重设异步调用实际函数
      func.apply(ctx, args);//让实际函数在间隔设置的时间后调用
    }, idle)
  }
}