JavaScript——防抖与节流

Posted 2023-04-04 搜捕鸟了

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript——防抖与节流相关的知识，希望对你有一定的参考价值。

javascript——防抖与节流

一、防抖(debounce)

1.1 概念

防抖：单位时间内，频繁触发事件，只执行最后一次。

举个栗子：在王者荣耀游戏内频繁按回城键，每一次按下回城键都会打断上一次回城，并且重新开始回城。

使用场景：

搜索框搜索输入：只需用户最后一次输入完，再发送请求，而不是输入一个字就发送一次请求。
手机号、邮箱验证输入检测：输完再自动验证。

实现防抖的两种方式：

使用工具库lodash中的_.debounce()方法
手写防抖函数

下面我们分别使用这两种方法优化以下需求的实现：

鼠标每移动一次，盒子内的数值加一。（防抖间隔设置为500毫秒）

1.2 `lodash`中的`_.debounce()`实现防抖

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>防抖</title>
    <script src="./node_modules/lodash/lodash.js"></script>
    <style>
        .box 
            width: 300px;
            height: 300px;
            background-color: pink;
            text-align: center;
            line-height: 300px;
            font-size: 40px;
            font-weight: 900;
            color: aliceblue;
        
    </style>
</head>

<body>
    <div class="box"></div>
    <script>
        const box = document.querySelector('.box')
        // console.log(box);
        function mouseMove() 
            box.innerHTML = num++
        
        let num = 0
        box.addEventListener('mousemove', _.debounce(mouseMove, 500))
    </script>
</body>

</html>

该方法的详细使用可参考文档： JavaScript 实用工具库——lodash中文文档

1.3. 手写防抖函数

核心：利用 setTimeout 定时器实现

声明定时器变量
每次鼠标移动（事件触发）的时候都要先判断是否有定时器，如果有先清除以前的定时器
如果没有定时器，则开启定时器，存入到定时器变量里面
定时器里面写函数调用

let num = 0
const box = document.querySelector('.box')
function mouseMove() 
    box.innerHTML = num++

function debounce(fn, t) 
    let timer
    return function ()   // 返回匿名函数
        if (timer) clearTimeout(timer)
        timer = setTimeout(function () 
            fn()  // 加小括号调用函数
        , 500)
    

box.addEventListener('mousemove', debounce(mouseMove, 500))

能够实现和lodash中的_.debounce()一样的效果。

二、节流(throttle)

2.1 概念

节流：单位时间内，频繁触发事件，只执行第一次。

举个栗子：王者荣耀技能有一定cd，点击释放技能后，cd期间无法继续释放技能。

使用场景：

高频事件：鼠标移动mousemove、页面尺寸缩放resize、滚动条滚动scroll等等。

实现防抖的两种方式：

使用工具库lodash中的_.throttle()方法
手写节流函数

下面我们分别使用这两种方法优化以下需求的实现：

鼠标在盒子上移动，不管移动多少次，每隔2000毫秒才+1。

2.2 `lodash`中的`_.throttle()`实现节流

const box = document.querySelector('.box')
function mouseMove() 
    box.innerHTML = num++

let num = 0
box.addEventListener('mousemove', _.throttle(mouseMove, 2000))

2.3 手写节流函数

节流的核心就是利用定时器来实现：

声明一个定时器变量
当鼠标每次滑动都先判断是否有定时器，如果有定时器则不开启新定时器
如果没有定时器则开启定时器，记得存到变量里面

注意：1.定时器里面调用执行的函数 2.定时器里面要把定时器清空。

let num = 0
        const box = document.querySelector('.box')
        function mouseMove() 
            box.innerHTML = num++
        
        function throttle(fn, t) 
            let timer = null
            return function ()   // 返回匿名函数
                if (!timer) 
                    timer = setTimeout(function () 
                        fn()  // 加小括号调用函数
                        timer = null  // 清空定时器
                    , t)
                 else 
                    return
                
            
        
        box.addEventListener('mousemove', throttle(mouseMove, 2000))

能够实现和lodash中的_.throttle()一样的效果。

值得注意的是：

定时器里面清空定时器只能将定时器置空，不能使用clearTimeout(定时器变量名)，因为定时器还在运作，无法使用clearTimeout(定时器变量名)。

三、总结

性能优化	说明	使用场景
防抖	单位时间内，频繁触发事件，只执行最后一次	搜索框搜索输入、手机号、邮箱验证输入检测
节流	单位时间内，频繁触发事件，只执行第一次	高频事件：鼠标移动mousemove、页面尺寸缩放resize、滚动条滚动scroll等等

1 为什么需要防抖和节流

在前端开发当中，有些交互事件，会被频繁触发，这样会导致我们的页面渲染性能下降，如果频繁触发接口调用的话，会直接导致服务器性能的浪费。

举个例子，在下面的代码中，我们定义了一个输入框，输入一段文字，测试键盘的keyup（键盘弹起）事件触发了多少次，通过该实例来演示事件是如何被频繁触发的。

    <input type="text" id="demo">
    <div>触发了：<span id="count">0</span>次</div>
    <script>
        // 获取input输入框与span标签
        let demo = document.getElementById("demo");
        let count = document.getElementById("count");

        // 为demo输入框注册keyup事件
        let init = 0; // 记录keyup事件被触发的次数
        demo.onkeyup = function () 
            // 将span标签中的文本修改为事件被触发的次数
            count.innerHTML = ++init;
        
    </script>

从上面的演示可以看到，我在输入框中输入了5个字，但是keyup事件会被触发30次。如果我们使用这样的方式去检测用户输入的用户名是否可用，这样高频率的触发不仅是对性能极大的浪费，而且用户还没有输入完就开始检测，对用户来说提示并不友好。在这样的情况下，我们就可以等用户输入完成之后，再去触发函数，这样的优化就使用到了防抖与节流。

2 防抖与节流原理

函数防抖：在事件触发后的 n 秒之后，再去执行真正需要执行的函数，如果在这 n 秒之内事件又被触发，则重新开始计时。也就是说，如果用户在间隔时间内一直触发函数，那么这个防抖函数内部的真正需要执行的函数将永远无法执行。

那么根据防抖的原理，我们可以尝试想象一下上面的例子的改进措施，如果为keyup事件添加防抖函数，那么只有当keyup在一段时间内不再被触发，函数才会执行，也就说才开始计数。

函数节流：规定好一个单位时间，触发函数一次。如果在这个单位时间内触发多次函数的话，只有一次是可被执行的。想执行多次的话，只能等到下一个周期里。

如果为keyup事件添加节流函数，那么效果就是，在一段时间内，会计数一次，然后在下一段时间内，再计数一次。

在了解防抖函数和节流函数的原理之后，接下来我们可以尝试自己写一个防抖与节流的函数，看看是否能达到我们预想的效果。

3 实现一个防抖函数

3.1 初步实现

根据之前的描述，在事件被触发一段时间之后，函数才会执行一次，那么防抖函数中我们应该为其传入两个参数：被执行的函数fun和这段时间time。

// fun：被执行的函数
// time：间隔的时间
function debounce(fun, time)

对于防抖函数来说，它的返回值应该是一个函数，因为事件触发时接收一个函数。在该函数内部，要设计一个定时器，让在time时间后触发函数fun。

function debounce(fun, time) 
    return function () 
        // time时间后触发函数fun
        setTimeout(fun, time);

但是上面的函数有一个问题，就是事件再次被触发时，会出现time时间后再执行一次函数fun，不能达到事件触发完成time时间后再执行函数的效果，也就是说，事件会被延时触发，并不能减少触发，这是因为定时器效果进行了累加，因此我们需要取消之前的定时器，以新的定时器为准。

function debounce(fun, time) 
    let timer;
    return function () 
        // 取消当前的定时器效果
        clearTimeout(timer);
        // time时间后触发函数fun
        timer = setTimeout(fun, time);

到这里一个初步的防抖函数就完成了，接下来使用该函数改进之前的例子，具体代码如下：

    <input type="text" id="demo">
    <div>触发了：<span id="count">0</span>次</div>
    <script>
        // 获取input输入框与span标签
        let demo = document.getElementById("demo");
        let count = document.getElementById("count");

        // 防抖函数
        function debounce(fun, time) 
            let timer;
            return function () 
                // 取消当前的定时器效果
                clearTimeout(timer);
                // time时间后触发函数fun
                timer = setTimeout(fun, time);
            
        

        // 为demo输入框注册keyup事件
        let init = 0; // 记录keyup事件被触发的次数
        demo.onkeyup = debounce(function () 
            // 将span标签中的文本修改为事件被触发的次数
            count.innerHTML = ++init;
        , 1000);
    </script>

3.2 this问题

从上面的效果图来看，我输入5个字后，1秒后keyup事件就触发了1次，对比之前的30次，大大减少了事件的触发频率。但是添加防抖之后，原本函数的this指向发生了改变。原本函数的this指向了触发事件的那个对象，但是添加防抖后this指向了window。

// 添加防抖之前打印 this
demo.onkeyup = function () 
    console.log(this); // <input type="text" id="demo"></input>

// 添加防抖之后打印 this
demo.onkeyup = debounce(function () 
    console.log(this);
, 1000);

因此在防抖函数中，我们需要重新把this指回触发事件的对象上。那防抖函数中返回的函数this指向了谁呢，我们可以打印一下：

        function debounce(fun, time) 
            return function () 
                console.log(this);

我们发现它的this也指向了触发事件的对象，那么接下来我们只需要让定时器的回调函数的this指向触发事件的对象就可以，这个过程主要使用call函数来修改this的指向。

function debounce(fun, time) 
    let timer;
    return function () 
        // 将当前的this赋值给that
        let that = this;

        // 取消当前的定时器效果
        clearTimeout(timer);

        // time时间后触发函数fun
        timer = setTimeout(function () 
            fun.call(that); // 使用call改变函数内部的this指向
        , time);

3.3 event问题

解决了this指向的问题，接下来观察事件对象event的内容，添加防抖之前，事件对象event是键盘事件KeyboardEvent，但是添加防抖之后，event为undefined。

// 添加防抖之前
demo.onkeyup = function (e) 
    console.log(e);

// 添加防抖后
demo.onkeyup = debounce(function (e) 
    console.log(e);
, 1000);

同样的操作，我们可以打印一下防抖函数返回的函数的arguments参数，发现参数中就包含了事件对象。

function debounce(fun, time) 
    console.log(arguments);

那么接下来我们将这个参数传给函数fun就可以了，具体传给call函数。call函数第二个参数开始接受其他的参数，因此需要使用spread运算符（…）传递参数。

function debounce(fun, time) 
    let timer;
    return function () 
        // 将当前的this赋值给that
        let that = this;
        // 获取函数的参数
        let args = arguments;

        // 取消当前的定时器效果
        clearTimeout(timer);

        // time时间后触发函数fun
        timer = setTimeout(function () 
            // 使用call改变函数内部的this指向，并传递参数
            fun.call(that, ...args);
        , time);

3.4 立即执行

到这一步防抖函数基本可以完成了，但是我们可以再为其添加一些功能，比如说立即执行。当设置了立即执行之后，第一次事件触发后，函数fun会立即执行，但是第一次事件触发后的time时间后，函数才可以重新触发。

我们可以传递第三个参数，第三个参数immediate决定了是否立即执行，true为是，false为否。那么代码逻辑就可以使用if…else…语句来进行判断。我们原本的防抖函数肯定不是立即执行的，因此放在else语句中。

function debounce(fun, time, immediate) 
    let timer;
    return function () 
        let that = this; // 将当前的this赋值给that
        let args = arguments; // 获取函数的参数
        clearTimeout(timer); // 取消当前的定时器效果
        
        if (immediate) 
            // 立即执行代码
         else  // 不立即执行
            // time时间后触发函数fun
            timer = setTimeout(function () 
                // 使用call改变函数内部的this指向，并传递参数
                fun.call(that, ...args);
            , time);

if语句中的代码不是简单的fun.call(that, ...args);就可以，因为当immediate为true时，就会一直调用，与不加防抖没什么区别。因此我们可以引入新的变量callNow，来记录是否要立即执行。

function debounce(fun, time, immediate) 
    let timer;
    return function () 
        // 将当前的this赋值给that
        let that = this;
        // 获取函数的参数
        let args = arguments;
        // 取消当前的定时器效果
        clearTimeout(timer);

        if (immediate)  // 立即执行
            let callNow = !timer;
            timer = setTimeout(function () 
                timer = null;
            , time);
            if (callNow) fun.call(that, ...args);
         else  // 不立即执行
            // time时间后触发函数fun
            timer = setTimeout(function () 
                // 使用call改变函数内部的this指向，并传递参数
                fun.call(that, ...args);
            , time);

if语句中的具体逻辑为：当immediate为true时，如果之前计时器不存在，也就是说第一次触发，那么callNow的值为true，那么代码就会立即执行；计时器存在，callNow就是false，不会立即执行代码。接下来可以在keyup事件中试验一下：

    <input type="text" id="demo">
    <div>触发了：<span id="count">0</span>次</div>
    <script>
        // 获取input输入框与span标签
        let demo = document.getElementById("demo");
        let count = document.getElementById("count");

        // 防抖函数
        function debounce(fun, time, immediate) 
            let timer;
            return function () 
                // 将当前的this赋值给that
                let that = this;
                // 获取函数的参数
                let args = arguments;
                // 取消当前的定时器效果
                clearTimeout(timer);

                if (immediate)  // 立即执行
                    let callNow = !timer;
                    timer = setTimeout(function () 
                        timer = null;
                    , time);
                    if (callNow) fun.call(that, ...args);
                 else  // 不立即执行
                    // time时间后触发函数fun
                    timer = setTimeout(function () 
                        // 使用call改变函数内部的this指向，并传递参数
                        fun.call(that, ...args);
                    , time);
                
            
        

        // 为demo输入框注册keyup事件
        let init = 0; // 记录keyup事件被触发的次数
        demo.onkeyup = debounce(function () 
            // 将span标签中的文本修改为事件被触发的次数
            count.innerHTML = ++init;
        , 1000, true);
    </script>

从上面效果可以看出，在输入第一个1时，事件就立即触发了，在接下来的1秒内事件不再被触发，而是在事件被触发的1秒之后才可以继续触发。

3.5 返回值问题

如果被执行的函数有返回值，使用上面的防抖函数就没办法获取到返回值了，因此可以继续改进：

function debounce(fun, time, immediate) 
    // result用来获取返回值
    let timer, result;

    return function () 
        // 将当前的this赋值给that
        let that = this;
        // 获取函数的参数
        let args = arguments;
        // 取消当前的定时器效果
        clearTimeout(timer);

        if (immediate)  // 立即执行
            let callNow = !timer;
            timer = setTimeout(function () 
                timer = null;
            , time);
            if (callNow) result = fun.call(that, ...args);
         else  // 不立即执行
            // time时间后触发函数fun
            timer = setTimeout(function () 
                // 使用call改变函数内部的this指向，并传递参数
                fun.call(that, ...args);
            , time);
        
        return result;

3.6 取消防抖

如果一个防抖函数等待的时间过长，immediate为true，那么我们可以取消防抖，然后再去触发，这样就可以减少等待时间。

在代码中我们将防抖返回的函数保存在变量debounced中，并且为它增加一个cancel方法，通过该方法可以取消当前的定时器，从而实现取消的效果。

function debounce(fun, time, immediate) 
    // result用来获取返回值
    let timer, result;

    let debounced = function () 
        // 将当前的this赋值给that
        let that = this;
        // 获取函数的参数
        let args = arguments;
        // 取消当前的定时器效果
        clearTimeout(timer);

        if (immediate)  // 立即执行
            let callNow = !timer;
            timer = setTimeout(function () 
                timer = null;
            , time);
            if (callNow) result = fun.call(that, ...args);
         else  // 不立即执行
            // time时间后触发函数fun
            timer = setTimeout(function () 
                // 使用call改变函数内部的this指向，并传递参数
                fun.call(that, ...args);
            , time);
        
        return result;
    

    debounced.cancel = function () 
        clearTimeout(timer); // 清除定时器
        timer = null; // 闭包会导致内存泄漏，因此需要将定时器制空
    

    return debounced; // 返回防抖函数

使用keyup事件试验一下，当没有取消防抖时，一段时间后才可以再次触发事件：

    <input type="text" id="demo">
    <div>触发了：<span id="count">0</span>次</div>
    <button id="btn">取消防抖</button>
    <script>
        // 获取input输入框、span标签、按钮
        let demo = document.getElementById("demo");
        let count = document.getElementById("count");
        let btn = document.getElementById("btn");

        // 防抖代码函数省略

        // 为demo输入框注册keyup事件
        let init = 0; // 记录keyup事件被触发的次数
        function fun()  // 触发keyup后要执行的函数
            count.innerHTML = ++init;
        
        let fd = debounce(fun, 3000, true);
        demo.onkeyup = fd; // 为输入框注册keyup事件
        btn.onclick = function ()  // 取消防抖的效果
            fd.cancel();
        
    </script>

当取消防抖函数之后，就可以立即触发事件了：

3.7 总结

初步防抖函数，解决了this指向以及event参数的问题：

function debounce(fun, time) 
    let timer;
    return function () 
        // 将当前的this赋值给that
        let that = this;
        // 获取函数的参数
        let args = arguments;

        // 取消当前的定时器效果
        clearTimeout(timer);

        // time时间后触发函数fun
        timer = setTimeout(function JavaScript——防抖与节流
 JavaScript：函数防抖与节流
 JavaScript性能优化8——防抖与节流
 JavaScript性能优化8——防抖与节流
 javaScript基本功之函数防抖与节流
 javascript中的防抖与节流。

JavaScript——防抖与节流

javascript——防抖与节流

一、防抖(debounce)

1.1 概念

1.2 lodash中的_.debounce()实现防抖

1.3. 手写防抖函数

二、节流(throttle)

2.1 概念

2.2 lodash中的_.throttle()实现节流

2.3 手写节流函数

三、总结

JavaScript防抖与节流

JavaScript防抖与节流

1 为什么需要防抖和节流

2 防抖与节流原理

3 实现一个防抖函数

3.1 初步实现

3.2 this问题

3.3 event问题

3.4 立即执行

3.5 返回值问题

3.6 取消防抖

3.7 总结

1.2 `lodash`中的`_.debounce()`实现防抖

2.2 `lodash`中的`_.throttle()`实现节流