防抖

触发高频事件后 n 秒内，函数只会执行最后一次，如果 n 秒内高频事件再次被触发，则重新计算时间。

使用场景：搜索框、登录、注册、发送验证码按钮

// 防抖
function debounce(cb) {
  // 使用闭包特性设置初始值
  let timer = undefined
  // 返回一个新函数出去
  return function () {
    // 每当用户输入的时候，把之前的定时器清除，让用户输入的间隔时间大于500ms
    clearTimeout(timer)
    // 延迟500ms调用
    timer = setTimeout(() => {
      // 调用传入的会掉函数
      cb.apply(this, arguments)
    }, 500)
  }
}

节流

触发高频事件后 n 秒内只会执行一次，节流会稀释函数的执行频率

使用场景：滚动、移动事件

// 节流
function throttle(cb) {
  // 设置一个标志记录状态
  let flag = true
  return function () {
    // 判断状态，如果为true则执行
    if (!flag) return
    // 设置状态为false，防止多次调用
    flag = false
    // 设置定时器，只有过了500ms时，flag设置为true，才能再次执行
    setTimeout(() => {
      cb.apply(this, arguments)
      flag = true
    }, 500)
  }
}