防抖和节流

防抖
就是指触发事件后在规定时间内函数只能执行一次，如果在规定时间内又触发了事件，则会重新计算函数执行时间。简单的说，当一个动作连续触发，则只执行最后一次。

思路：首先运行时把定时器赋值给一个变量，第二次执行时，如果间隔没有超过定时器设定的时间则会清除掉定时器，重新设定定时器，依次反复，当停止下来，没有执行清除定时器，超过一定时间后触发回调函数。

function debounce(func, delay) {
  let timer = null
  return function (...args) {
    timer && clearTimeout(timer)
    timer = setTimeout(() => {
      func.apply(this, args)
    }, delay)
  }
}

应用场景
连续的事件，只需触发一次回调的场景

• 搜索框搜索输入。只需用户最后一次输入完，再发送请求
• 手机号、邮箱验证输入检测
• 窗口大小resize。只需窗口调整完成后，计算窗口大小，防止重复渲染。

节流
就是限制一个函数在规定时间内只能执行一次。

function throttle(fn, delay) {
    let timer = null
    let flag = true
    return function (...args) {
        if(!flag) return
        flag = false
        timer && clearTimeout(timer)
        timer = setTimeout(() => {
            flag = true
            func.apply(this, args)
        }, delay)
    }
}

应用场景
间隔一段时间执行一次回调的场景有：

• 滚动加载，加载更多或滚动到底部监听
• 谷歌搜索框，搜索联想功能
• 高频点击提交，表单重复提交