JavaScript 节流、防抖

1. 节流

节流（throttle）

所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数

 假如一张轮播图完成切换需要300ms， 不加节流效果，快速点击，则嗖嗖嗖的切换

 加上节流效果， 不管快速点击多少次， 300ms时间内，只能切换一张图片。

利用节流来处理-鼠标滑过盒子显示文字

要求： 鼠标在盒子上移动，里面的数字就会变化+1

利用节流的方式， 鼠标经过，500ms ，数字才显示

const box = document.querySelector('.box')
let i = 1
function mouseMove() {
  box.innerHTML = i++
  // 如果存在开销较大操作，大量数据处理，大量dom操作，可能会卡
}
function throttle(fn, t = 500) {
  let startTime = 0
  return function() {
    let now = Date.now()
    if (now - startTime >= t) {
      fn()
      startTime = now
    }
  }
}
box.addEventListener('mousemove', throttle(mouseMove, 500))

2. 防抖

防抖（debounce）

所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间

举个栗子：

北京买房政策：需要连续5年的社保，如果中间有一年断了社保，则需要从新开始计算

比如，我 2020年开始计算，连续交5年，也就是到2024年可以买房了，包含2020年

但是我 2024年断社保了，整年没交，则需要从2025年开始算第一年往后推5年… 也就是 2029年才能买房…

利用防抖来处理-鼠标滑过盒子显示文字

const box = document.querySelector('.box')
let i = 1
function mouseMove() {
  box.innerHTML = i++
}
function debounce(fn, t = 500) {
  let timeId
  return function() {
    // 如果有定时器，先清楚
    if (timeId) clearTimeout(timeId)
    // 开启定时器
    timeId = setTimeout(function() {
      fn()
    }, t)
  }
}
box.addEventListener('mousemove', debounce(mouseMove, 500))