scroll事件页面抖动--函数节流与函数防抖

resize，scroll，hover等js事件触发时绑定的方法会被频繁调用，致使页面产生性能问题，所以我们使用函数节流来解这个决问题。

思路：如果事件一直被触发，也只在一定事件间隔才执行一次

//scroll方法中当间隔时间大于2s，do somthing执行一次
window.addEventListener('scroll',function(){
    var timer ;//使用闭包，缓存变量
    var startTime = new Date();
    return function(){
        var curTime = new Date();
        if(curTime - startTime >= 2000){
            timer = setTimeout(function(){
                console.log('do somthing')
            },500);
            startTime = curTime;
        }

    }
}());

 

也可以将节流函数封装一下，我用的es6语法：

/**
     * 节流函数
     * @param fn Function 触发事件后需要执行的函数
     * @param delay String  间隔时间 ms
     * */
    delayScrollFunc(fn, delay) {
      const now = new Date().getTime();
      if (now - this.lastScrollCall < delay) return;
      this.lastScrollCall = now;

      setTimeout(() => {
        fn();
      }, 60); // 在实际项目中，我发现这里再延迟一点时间执行效果更好（针对监听scroll）
    },