函式節流與防抖是很相似的概念，但它們的應用場景不太一樣。

函式節流

• 定義：指連續觸發事件但是在 n 秒中只執行一次函式。節流會稀釋函式的執行頻率。
• 應用場景：
  • 用於監聽 mousemove, touchmove, resize, scroll等事件
  • 拖拽動畫、下拉載入等

    function throttle(fn, delay = 200){
      var lastTime = 0;
      return function(){
        var nowTime = new Date();
        if(nowTime - lastTime > delay){
          fn.call(this)
          lastTime = nowTime
        }
      }
    }
    
    document.onscroll = throttle(function(){
      console.log("e")
    })
 

函式防抖

• 定義：指觸發事件後在 n 秒內函式只能執行一次，如果在 n 秒內又觸發了事件，則會重新計算函式執行時間。
• 應用場景：
  • 可用於input.change實時輸入校驗，比如輸入實時查詢，你不可能摁一個字就去後端查一次，肯定是輸一串，統一去查詢一次資料
  • 提交按鈕的點選事件

   <button>提交</button>

   /****非立即執行******/
   function debounce(fn, delay = 1000){
      var timer = null;
      return function(){
        clearTimeout(timer);
        timer = setTimeout(function(){
          fn.apply(this)
        }, delay)
      }
    }
    
    /****立即執行******/
    function debounce(fn, delay = 1000){
      var timer = null;
      return function(){
        clearTimeout(timer);
        if(!timer){
          fn.apply(this)
        }
        timer = setTimeout(function(){
          timer = null
        }, delay)
      }
    }
    
    document.querySelector('input').onclick = debounce(function(){
      console.log("觸發了")
    })