js防抖和节流

函数防抖（debounce）: 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

// 模拟一段ajax请求
function ajax (content) {
  console.log('ajax request' + content)
}

let input = document.getElementById('unDdebounce')
input.addEventListener('keyup', function (e) {
  ajax(e.target.value)
})

上面代码会出现，只要按下键盘就会触发ajax请求，不仅从资源上来说是很浪费的行为，而且实际应用中，用户也是输出完整信息后，才会请求，下面我们优化下：

// 模拟一段ajax请求
function ajax (content) {
  console.log('ajax request' + content)
}

function debounce(fun, delay=500) {
  return function (args) {
    let that = this
    let _args = args
    clearTimeout(fun.id)
    fun.id = setTimeout(function() {
      fun.call(that, _args)
    }, delay)
  }
}
let inputb = document.getElementById('debounce')
let debounceAjax = debounce(ajax, 500)
inputb.addEventListener('keyup', function (e) {
  debounceAjax(e.target.value)
})

上面代码可以看到，加入防抖后，当你在频繁的输入时，并不会发送请求，只有当你在指定间隔内没有输入时，才会执行函数。如果停止输入但是在指定间隔内有输入，会重新出发计时。

函数节流（throttle）:规定在一个单位时间内，只能触发一次函数，如果这个单位时间内触发对此函数，只有一次生效。

看一个例子：

function throttle(fn, delay=200) {
  let last, timer
  return function (args) {
    let that = this
    let _args = args
    let now = + new Date()
    if (last && now < last + delay) {
      clearTimeout(timer)
      timer = setTimeout(function () {
        last = now
        fn.apply(that, _args)
      }, delay)
    } else {
      last = now
      fn.apply(that, _args)
    }
  }
}
let throttleAjax = throttle(ajax, 1000)
let inputc = document.getElementById('throttle')
inputc.addEventListener('keyup', function (e) {
  throttleAjax(e.target.value)
})

可以看到，我们在不断输入时，ajax会按照我们设定的时间，每1s执行一次。

总结

函数防抖和函数节流都是防止在某一时间频繁触发，但是原理不一样。

函数防抖是某一时间段内值只执行一次，而函数节流是间隔时间执行。