事件的節流與防抖

// 節流函數1
  function throttle (fn, interval) {
    // last 上次觸發回調的時間
    let last = 0;

    return function () {
      let context = this

      let args = arguments

      let now = +new Date()
      if (now - last >= interval) {
        last = now
        fn.apply(context, args)
      }
    }
  }

  // 節流函數2
  function throttle1 (callback, delay) {
    let flag = true
    return function () {
      let args = arguments
      if (flag) {
        flag = flase
        setTimeout(function () {
          callback.apply(this, args)
          flag = true
        }, delay)
      }
    }
  }

  // 防抖函數
  function debounce (fn, delay) {
    let timer = null

    return function () {
      let context = this

      let args = arguments

      if (timer) {
        clearTimeout(timer)
      }
      timer = setTimeout(function () {
        fn.apply(context, args)
      }, delay)
    }
  }


  // 用throttle 來優化debounce

  function debounceNice(fn, delay) {
    let last = 0, timer = null
    return function () {
      let context = this
      let args = arguments

      let now = +new Date()

      if (now - last < delay) {
        clearTimeout(timer)
        timer = setTimeout(() => {
          last = now
          fn.apply(context, args)
        }, delay)
      } else {
        last = now
        fn.apply(context, args)
      }
    }
  }

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章