（一）防抖（debounce）
1. 思想
「抖」是振动的意思，振动是指一个状态改变的过程。「防抖」实际上防的是物体状态在短时间内发生快速变化。在 Web 前端开发领域，即是防止浏览器在短时间内多次计算元素属性，本质上，是为了节省浏览器计算资源。在与服务器交互场景中，也可以起到节省带宽，服务器压力的作用。
「防抖函数」的核心原理是，延迟函数执行，若在延迟期间，函数被调用，则继续延迟直至无函数调用为止，其表现为函数仅被调用一次。状态只存在从 0 到 1，从初始值到结果值的变化，因此不存在频繁的抖动。
假设一个人不断的接收命令采取行动，防抖思想则是让这个人在接收完所有命令前，不要采取任何行动，当命令结束一定时间后（确认没有新的命令），统一采取行动。
2. 实现
核心代码
const debounce = (fn, delay) => {
let timer = null
return (...args) => {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
fn(...args)
}, delay)
}
}
3. 使用场景
- 输入框输入即时发送请求；
- 浏览器 resize 回调；
- 滚动条滚动回调；
（二）节流（throttle）
1. 思想
「节」是节约的意思，而「流」在开发领域中即是计算，节流的核心目的与防抖相同：节省计算机计算资源。但是在思想上则不如防抖函数那么「激进」，只让函数执行一次。节流函数允许函数被频繁触发，但是触发频率不是由用户决定，而是由开发者限定触发时间间隔。
同样假设一个人不断的接收命令采取行动，节流思想则是让这个人每过一段时间，行动一次，在两次行动之间的间隔内，不采取任何行动。
2. 实现
const throttle = (fn, delay) => {
let execute = true
return (...args) => {
if (!execute) return
execute = false
setTimeout(() => {
fn(...args)
execute = true
}, delay)
}
}
3. 使用场景
- mousemove 事件
- 按照滚动距离加载元素；