节流和防抖

[Pieces312]

节流（throttle）：当用户在反复触发一些事件（鼠标滚动事件等）时，需要指定一个“巡视”的时间间隔，在这个时间间隔内，无论触发多少次都不会执行，只有在时间间隔上触发才会执行回调函数。

function throttle(fn, threshold = 200) {
  let timer = null
  let start = new Date().getTime()

  return function () {
    let current = new Date().getTime() - 0
    timer && clearTimeout(timer)
    
    if (current - start >= threshold) {
      fn.call(this)
      start = current
    } else {
      timer = setTimeout(fn.call(this), threshold)
    }
  }
}

const handleMouse = throttle(function (e) {
  console.log(e.pageX, e.pageY)
})

document.body.addEventListener('mousemove', handleMouse)

防抖（debouce）：给定一个固定时间，如果开始触发动作并在这个时间内没有再次触发该动作，就执行一次。否则将重新计算时间。

function debouce(fu, delay = 200) {
  let timeout = null

  return function () {
    timeout && clearTimeout(timeout)
    timeout = setTimeout(fn.call(this), delay)
  }
}

const handleChange = debouce(function() {
  console.log('开始触发了！')
})

document.getElementByID('root').addEventListener('input', handleChange)

文章链接：https://juejin.im/post/6844904136064925704