JavaScript 中，防抖和节流的原理和区别 | 掘金·日新计划

前言

JavaScript 中，防抖和节流是一种用于优化事件处理函数调用频率的技术。防抖和节流的目的都是为了避免频繁地触发事件处理函数，从而减少浏览器和服务器的负担。

防抖

防抖（Debounce）的原理是在事件被触发后，等待一定的时间间隔（比如500ms），如果在这个时间间隔内没有再次触发该事件，才会执行事件处理函数。如果在这个时间间隔内又触发了该事件，那么就重新等待新的时间间隔。

防抖主要是通过定时器来实现，如下：

function debounce(fun, time) {
    let timer
    return function () {
        let that = this
        if (timer) clearTimeout(timer)
        timer = setTimeout(function () {
            fun.call(that)
        }, time)
    }
}

以上代码中，fun 是事件处理程序，time 是事件执行的延迟时间，单位：毫秒。每一次触发事件时，会先判断一下 timer 的值是否赋值了定时器，如果赋值了，就直接清除定时器。然后在执行下面的代码。

节流

节流（Throttle）的原理是在事件被触发后，首先执行事件处理函数，然后设置一个时间间隔（比如500ms），在这个时间间隔内不再触发该事件。只有等待这个时间间隔过去后，才会重新触发事件，并再次执行事件处理函数。

节流的实现方式有两种：

1. 使用定时器实现

function throttlea(fun, t) {
    let timer = null
    return function () {
        let that = this
        if (!timer) {
            timer = setTimeout(function () {
                fun.call(that)
                timer = null
            }, t)
        }
    }
}

以上代码中，触发事件后，会直接重新赋值 timer 为一个定时器，到时间后执行事件处理程序，重新赋值 timer 为 null，在这期间，因为 timer 的值是一个定时器，if 判断是不会执行的，必须重新赋值为 null 后才会重新执行。

2. 时间戳的方式

function throttle(fun, time) {
    let start = 0
    return function () {
        let that = this
        let current = Date.now()
        if (current - start >= time) {
            fun.call(that)
            start = current
        }
    }
}

以上代码中，触发事件后，定义开始触发事件的时间 start 为零，获取当前的时间戳赋值给 current，判断当前时间与初始时间是否超过间隔，如果超过了就把当前这个时间戳赋值给 start，然后执行事件处理程序。（因为初始时间为零，所以第一次触发会直接执行）

总结

1. 防抖：适用于需要等待用户停止操作后再执行的场景，比如搜索框输入文本后请求接口。
2. 节流：适用于需要限制函数执行频率的场景，比如滚动事件中的懒加载。