手寫js函數節流與抖動

函數防抖的實現

函數抖動：在事件被觸發 n 秒後再執行回調，若是在這 n 秒內事件又被觸發，則從新計時。

// 函數防抖的實現
function debounce(fn, wait) {
  var timer = null

  return function () {
    var context = this,
      args = arguments

    // 若是此時存在定時器的話，則取消以前的定時器從新記時
    if (timer) {
      clearTimeout(timer)
      timer = null
    }

    // 設置定時器，使事件間隔指定事件後執行
    timer = setTimeout(() => {
      fn.apply(context, args)
    }, wait)
  }
}
// test
var debounceRun = debounce(function () {
  console.log(123)
}, 2000)
// 只有當鼠標移動中止後2s打印123
window.addEventListener('mousemove', debounceRun)

函數節流的實現

函數節流：規定一個單位時間，在這個單位時間內，只能有一次觸發事件的回調函數執行,若是在同一個單位時間內某事件被觸發屢次，只有一次能生效。

function throttle(fn, delay) {
  var preTime = Date.now()
  return function () {
    var nowTime = Date.now()
    if (nowTime - preTime >= delay) {
      preTime = nowTime
      fn.apply(this, arguments)
    }
  }
}
// test
var throttleRun = throttle(() => {
  console.log(123)
}, 2000)
// 不停的移動鼠標，控制檯每隔2s就會打印123
window.addEventListener('mousemove', throttleRun)