提升前端效率：掌握防抖与节流

N-A

已于 2023-12-15 17:55:02 修改

阅读量1.4k

点赞数 29

分类专栏：前端汇总 JavaScript 文章标签：前端 JavaScript 防抖节流性能优化

于 2023-12-14 22:43:20 首次发布

本文链接：https://blog.csdn.net/weixin_51735748/article/details/135005559

版权

前端汇总同时被 2 个专栏收录

40 篇文章 8 订阅

订阅专栏

JavaScript

7 篇文章 1 订阅

订阅专栏

概念

当涉及到处理高频事件时，防抖（Debounce）和节流（Throttle）成为关键的工具。它们的作用是优化函数的执行频率，特别是在处理浏览器事件（如resize、scroll、keypress、mousemove等）时，有助于减少不必要的函数执行，提高前端性能和用户体验。

节流（Throttle） 像是给事件加上了时间间隔。就像大厦底下的电梯，定时运行以确保在每个时间段内只执行一次。比如，在规定的时间间隔内（比如15秒），无论有多少人进入电梯，都只会在规定时间到达时运行一次。

防抖（Debounce） 则更像是“重置”计时器。当第一个人进入电梯后，等待一段时间（比如15秒），如果这段时间内有人再次进入，计时器会重新开始，直到等待时间耗尽后才会执行一次。

这两种策略都有助于控制函数的执行次数，优化性能，并可根据场景特性选择合适的策略。节流适用于需要在一段时间内定期执行的场景，而防抖则更适用于等待最后一个事件后再执行的场景。正确使用它们能有效减少资源消耗，改善用户体验，特别是在大规模的前端应用中。

代码实现

以下是节流的具体代码实现：

function throttled(fn, delay) {
    let timer = null
    let starttime = Date.now()
    return function () {
        let curTime = Date.now() // 当前时间
        let remaining = delay - (curTime - starttime)  // 从上一次到现在，还剩下多少多余时间
        let context = this
        let args = arguments
        clearTimeout(timer)
        if (remaining <= 0) {
            fn.apply(context, args)
            starttime = Date.now()
        } else {
            timer = setTimeout(fn, remaining);
        }
    }
}

这段代码是一个简单的基于时间戳的节流函数实现。它的目的是确保一个特定函数在设定的时间间隔内只执行一次。

首先，它接受一个需要执行的函数和一个时间间隔作为参数。在每次函数被调用时，它会记录当前时间戳并计算自上次执行以来的时间差。这段时间与设定的时间间隔进行比较：

如果时间间隔已经超过了设定的延迟，那么立即执行传入的函数，并更新上次执行的时间戳。如果时间间隔尚未达到设定的延迟，它会设置一个新的定时器，在剩余的时间后再次尝试执行函数。

以下是防抖的具体代码实现：

function debounce(func, wait) {
    let timeout;

    return function () {
        let context = this; // 保存this指向
        let args = arguments; // 拿到event对象

        clearTimeout(timeout)
        timeout = setTimeout(function(){
            func.apply(context, args)
        }, wait);
    }
}

这个函数接收一个需要执行的函数和一个等待时间作为参数。每当这个函数被调用时，它会清除之前设定的定时器，并设置一个新的定时器，在等待一段时间后执行传入的函数。

每次调用函数时，它会获取当前的 this 上下文和传入的参数。然后清除之前设置的定时器。接着，设置一个新的定时器，在指定的等待时间后执行传入的函数，并将之前获取的上下文和参数传递给这个函数。

防抖如果需要立即执行，可加入第三个参数用于判断，实现如下：

function debounce(func, wait, immediate) {

    let timeout;

    return function () {
        let context = this;
        let args = arguments;

        if (timeout) clearTimeout(timeout); // timeout 不为null
        if (immediate) {
            let callNow = !timeout; // 第一次会立即执行，以后只有事件执行后才会再次触发
            timeout = setTimeout(function () {
                timeout = null;
            }, wait)
            if (callNow) {
                func.apply(context, args)
            }
        }
        else {
            timeout = setTimeout(function () {
                func.apply(context, args)
            }, wait);
        }
    }
}

这个函数和之前的防抖函数类似，接收一个需要执行的函数、等待时间和一个布尔值 immediate 作为参数。但是它做了一些额外的处理以满足不同的需求。

首先，它仍然会获取当前的 this 上下文和传入的参数。然后，根据 immediate 参数的不同情况进行不同的处理：如果 immediate 为 true，则在第一次调用时会立即执行函数，并且只有在等待时间后再次触发时才会重新计时延迟执行。如果 immediate 为 false 或未提供，默认行为是等待一定时间后执行函数。

在代码中，它根据 immediate 参数的值设定一个 callNow 变量，用于控制第一次是否立即执行函数。如果是立即执行，并且是第一次调用，则会立即执行函数；否则，在等待时间后执行函数。

这种实现方式适用于需要在首次触发时立即执行一次函数的情况，之后再根据设定的间隔进行延迟执行。这样能够更加灵活地满足不同场景下的需求，比如处理搜索建议时立即展示结果，然后在用户停止输入后再次触发。