scrollイベントページジッタ--関数スロットルと関数ジッタ防止

resize,scroll,hoverなどのjsイベントがトリガーされるとバインドの方法が頻繁に呼び出され,ページにパフォーマンスの問題が発生するため,関数スロットルを用いてこの問題を解く.
考え方:イベントが常にトリガーされている場合でも、一定のイベント間隔で1回しか実行されません.

//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;
        }

    }
}());

 
スロットル関数をカプセル化することもできます.私が使っているes 6構文:

/**
     *     
     * @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）
    },