（手把手學會系列）--函數的節流和防抖

（手把手學會系列）–函數的節流和防抖

下面是上的是封裝好的函數節流和防抖，可以直接拿去使用,更進一步的解說，再後期的更文中還會提到

函數節流

在函數需要頻繁觸發時候:函數執行一次後,只有大於設定的執行週期後纔會執行
第二次,適合多次事件按時間做平均分配觸發

• 場景：
  • 窗口調用(resize)
  • 頁面滾動(scroll)
  • DOM元素的拖拽,muonsemove
  • 搶購瘋狂點擊,mounsedown
• 案例代碼

  // 節流的函數
  function throttle(callback, time) {
    // 保證第一次事件必然調用回調
    let start = 0
    return function (...args) {
      console.log('throttle 事件')
      // 當前時間
      const current = Date.now()
      // 滿足條件才調用
      if (current - start > time) {
        // 準備調用之前 當前時間保存到start
        start = current
        callback.apply(this, args)
      }
    }
  }
  function handleClick(event) {
    console.log('處理點擊事件')
  }
  document.getElementById('throttle').onclick = throttle(handleClick, 2000)
  

函數的防抖

在函數需要頻繁觸發時候:在規定時間內,只讓最後一次生效,前面不生效,適合多次事件一次響應的情況

• 場景
  • 實時搜索聯想(keyup)
  • 文本框輸入驗證(連續輸入文字後發送ajax請求進行驗證,驗證一次就可以了)
• 案例代碼

  // 防抖函數
  function debounce(callback, time) {
    return function (...args) {
      console.log('debounce事件')
      // 清除上一次未完成的定時器
      if (callback.timeId) {
        clearTimeout(callback.timeId)
      }
      callback.timeId = setTimeout(() => {
        // 刪除保存的定時器id標識
        delete callback.timeId
        // 延遲調用
        callback.apply(this, args)
      }, time);
    }
  }
  // 防抖函數
  function handleClick(event) {
    console.log('處理點擊事件')
  }
  document.getElementById('debounce').onclick = debounce(handleClick, 2000)
  

未完待續…