防抖函數的使用

在進行窗口的resize、scroll，輸入框內容校驗等操作時，如果事件處理函數調用的頻率無限制，會加重瀏覽器的負擔，導致用戶體驗非常糟糕。那麼此時， 我們可以使用防抖函數，那麼下面寫一個簡單的防抖函數

      // 防抖函數
      const debounce = (fn, duration) => {    
        let timeout = null;    
        return () => {        
          if(timeout !== null) {
            clearTimeout(timeout)
          }        
          timeout = setTimeout(fn, wait);
        }
      }
      // 事件處理函數
      const handle = () => {    
        const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
　　    console.log('滾動條位置：' + scrollTop);
      }
      // 滾動條監聽
      window.addEventListener('scroll', debounce(handle, 500));

這樣子， 觸發滾動事件的時候， 不會立即觸發 handle事件， 只有當0.5s內沒有再次觸發滾動事件的時候， handle纔會觸發，這樣子對函數調用的頻率做了大大的限制，大幅度減輕瀏覽器的負擔