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），在这个时间间隔内不再触发该事件。只有等待这个时间间隔过去后，才会重新触发事件，并再次执行事件处理函数。

节流的实现方式有两种：

• 使用定时器实现

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 后才会重新执行。

• 时间戳的方式

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，然后执行事件处理程序。（因为初始时间为零，所以第一次触发会直接执行）

总结

防抖：适用于需要等待用户停止操作后再执行的场景，比如搜索框输入文本后请求接口。

节流：适用于需要限制函数执行频率的场景，比如滚动事件中的懒加载。

到此这篇关于JavaScript中防抖和节流的原理和区别详解的文章就介绍到这了,更多相关JavaScript防抖和节流内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论