js手写防抖跟节流

节流三种写法

隔一段时间执行一次，期间被多次触发也不管。实现原理：设置定时器，xx时间后执行事件处理，当事件执行完后清除定时器。

1. 时间戳

function throttle (fn,delay) {
  let last = Date.now()
  return function() {
    let context = this
    let args = arguments
    let current = Date.now()
    if(current - last >= delay) {
      fn.apply(context,args)
      last = Date.now()
    }
  }
}

缺点： 第一次应该会立即执行
2. 定时器

function throttle (fn,delay) { 
  let timer = null
  return function() {
    let context = this
    let args = arguments
    if(!timer) {
      timer = setTimeout(() => {
        fn.apply(context, args)
      },delay)
    }
  }
}

3. 时间戳加定时器

function throttle(fn, delay) {
  let timer 
  let last = Date.now()
  return function() {
    const current = Date.now()
    const remaining = delay - (current - last)
    const context = this
    const args = arguments
    if(remaining < 0) {
      fn.apply(context, args)
      last = Date.now()
    } else {
      if (timer) clearTimeout(timer)
      timer = setTimeout(() => {
        fn.apply(context, args)
      },delay)
    }
  }
}

当第一次触发事件时，肯定不会立即执行函数，而是在delay秒后才执行。
之后连续不断触发事件，也会每delay秒执行一次。
当最后一次停止触发后，由于定时器的delay延迟，可能还会执行一次函数。

防抖

短时间内大量触发，但只执行一次。原理：设置定时器，xx时间后执行事件处理，期间每次触发事件都会将定时器重置，直到xx时间内无第二次事件触发。

function debounce(fn, delay)  {
  let timer = null
  return function() {
    if (timer) clearTimeout(timer)
      timer = setTimeout(() => {
        fn.apply(this,arguments)
      },delay)
  }
}