速通防抖与节流

防抖

触发事件后，在n秒内，事件只执行一次，如果在n秒内又触发了事件，则会重新计算函数的执行时间。

比如点击按钮，规定了 2 秒的间隔时间，结果在 1.5 秒的时候又点了，则会重新计算2秒的时间，必须等待 2 秒后点击才会生效。
应用场景举例：上拉触底加载下一页，下拉刷新。
代码示例：

let count = 0, time = null, interval = 2000

document.querySelector('body').onclick = () => {
  if (!time || new Date() - time >= interval) {
    count++
    console.log(`点击了${count}次`)
  }
  time = new Date()
}

节流

连续发生的事件在n秒内，只执行一次。

比如某个按钮在 2 秒内被点击了数次，但只会执行一次。（每次点击后不会像防抖一样重置等待时间）
应用场景举例：搜索查询（按钮）、获取短信验证码
代码示例：

let count = 0, time = null, interval = 2000

document.querySelector('body').onclick = () => {
  if (!time || new Date() - time >= interval) {
    time = new Date()
    count++
    console.log(`点击了${count}次`)
  }
}