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))