一、節流

• 概念：在規定的間隔時間範圍內不會重覆觸發回調，只有大於這個時間間隔才會觸發回調，把頻繁觸發變為少量觸發。

• 類似於技能CD。

• 應用：點擊按鈕，輪播圖點擊左右箭頭。

• 插件lodash.js，它裡面封裝了函數的防抖與節流業務。

  <p>計數器：<span>0</span></p>
  <button>+1</button>
  // 獲取元素
  let span = document.querySelector('span')
  let btn = document.querySelector('button')
  let count = 0
  let timer = null
  // 控制節流閥是否開啟或關閉
  let flag = true
  // 需求：在一秒以內，不管點擊按鈕多少次，計數器數值只能+1
  btn.onclick = function () {
    if (flag) {
      flag = false
      timer = setTimeout(() => {
        count++
      	span.innerHTML = count
          flag = true
      }, 1000)
    }
  }
  

二、防抖

• 概念：前面的所有的觸發都被取消，最後一次執行在規定的時間之後才會觸發，也就是說如果連續快速的觸發，只會執行一次。

• 類似於LOL回城被打斷。

• 應用：輸入框搜索。

• 插件lodash.js，它裡面封裝了函數的防抖與節流業務。

  <input type="text" @input="inputFn" />
  data () {
    return {
      timer: null
    }
  },
  methods: {
    inputFn () {
      if (this.timer) {
  	clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
  	// 發送網路請求
      }, 3000)
    }
  }