JS節流和防抖函數

1、 實現一個節流函數

// 思路：在規定時間內只觸發一次
function throttle (fn, delay) {
  // 利用閉包保存時間
  let prev = Date.now()
  return function () {
    let context = this
    let arg = arguments
    let now = Date.now()
    if (now - prev >= delay) {
      fn.apply(context, arg)
      prev = Date.now()
    }
  }
}

function fn () {
  console.log('節流')
}
addEventListener('scroll', throttle(fn, 1000)) 

2、 實現一個防抖函數

// 思路:在規定時間內未觸發第二次，則執行
function debounce (fn, delay) {
  // 利用閉包保存定時器
  let timer = null
  return function () {
    let context = this
    let arg = arguments
    // 在規定時間內再次觸發會先清除定時器後再重設定時器
    clearTimeout(timer)
    timer = setTimeout(function () {
      fn.apply(context, arg)
    }, delay)
  }
}

function fn () {
  console.log('防抖')
}
addEventListener('scroll', debounce(fn, 1000))