透过现象看本质：防抖函数和节流函数

（一）防抖（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. 使用场景

1. 输入框输入即时发送请求；
2. 浏览器 resize 回调；
3. 滚动条滚动回调；

（二）节流（throttle）

1. 思想

「节」是节约的意思，而「流」在开发领域中即是计算，节流的核心目的与防抖相同：节省计算机计算资源。但是在思想上则不如防抖函数那么「激进」，只让函数执行一次。节流函数允许函数被频繁触发，但是触发频率不是由用户决定，而是由开发者限定触发时间间隔。

同样假设一个人不断的接收命令采取行动，节流思想则是让这个人每过一段时间，行动一次，在两次行动之间的间隔内，不采取任何行动。

2. 实现

const throttle = (fn, delay) => {
    let execute = true
    return (...args) => {
        if (!execute) return 
        execute = false
        setTimeout(() => {
            fn(...args)
            execute = true
        }, delay)
    }
}

3. 使用场景

1. mousemove 事件
2. 按照滚动距离加载元素；