前端之js - 函數節流

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）
    },