函数防抖(debounce)

防抖函数 debounce 指的是某个函数在某段时间内，无论触发了多少次回调，都只执行最后一次。假设我们设置了一个等待3秒的函数，在这3秒内如果遇到函数调用请求就重新计时3秒，直至新的3秒内没有函数调用请求，此时执行函数，不然就依次类推重新计时。

原理与实现

实现原理就是利用定时器，函数第一次执行时设定一个定时器，之后调用时发现已经设定过定时器就清空之前的定时器，并重新设定一个新的定时器，如果存在没有被清空的定时器，当定时器结束后触发函数执行。

// func 是用户传入需要防抖的函数
// wait 是等待时间
const debounce = ( func, wait = 100 ) => {
  // 设置一个定时器   （id)
  let timer = 0
  // 这里放回的函数是每次用户实际调用的防抖函数
  // 如果已经设置过定时器就清空上一次的定时器
  // 开始一个新的定时器，延迟执行用户传入的方法
  return function(...args) {
    if(timer)  clearTimeout(timer)
    timer = setTimeout(() => {
      func.apply(this, args)
    }, wait )
  }
}

函数节流(throttle)

规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。即每隔一段时间后执行一次，也就是降低频率，将高频操作优化成低频操作。通常使用场景：滚动条事件 或者 resize 事件，通常每隔 100~500ms 执行一次即可

// func 是用户传入需要防抖的函数
// wait 是等待时间
const throttle = (func, wait = 100) => {
  // 上一次执行函数的时间
  
  let lastTime = 0
  return (...args) => {
    let now = new Date().getTime()
    // 将当前时间和上一次执行函数时间对比
    // 如果差值大于设置的时间就执行函数
    if(now - lastTime > await) {
      func.apply(this, args)
      lastTime = now
    }
  }
}

let i = 1
window.addEventListener('scroll', throttle(() => {
  console.log('图片懒加载')
  console.log(i)
  i += 1
}, 350))

总结

函数防抖和函数节流都是防止某一时间频繁触发，但是原理却不同。函数防抖是某一段时间内只执行一次，而函数节流是间隔时间执行。

debounce

search搜索联想，用户在不断输入值时，用防抖来节约请求资源。window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其触发一次

throttle

鼠标不断点击触发，mousedown(单位时间内只触发一次)监听滚动事件，比如是否滑倒底部自动加载更多，用throttle来判断