JavaScript防抖与节流超详细全面讲解

目录

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 () {
            // 使用call改变函数内部的this指向,并传递参数
            fun.call(that, ...args);
        }, time);
    }
}

增加了立即执行效果的防抖函数:

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);
        }
    }
}

解决了返回值问题的防抖函数:

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;
    }
}

增加了取消功能的防抖函数:

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; // 返回防抖函数
}

4 实现节流函数

4.1 通过时间戳实现节流

当触发事件的时候,我们取出当前的时间戳,然后减去之前的时间戳(时间戳初始值为0),如果大于设置的时间time,就执行函数fun,然后更新时间戳为当前的时间戳,如果小于time,就不执行函数。

根据上面的表述,节流函数有两个参数,一个是要执行的函数fun,一个是等待的时间time,那么就可以写出初始的代码:

function throttle(fun, time) {
    // 节流代码
}

节流函数的返回值也是一个函数,首先要设置初始时间戳为0,然后获取当前的时间戳,如果间隔的时间大于time,那么就执行函数,否则不执行。

function throttle(fun, time) {
    let old = 0;
    return function () {
        let now = new Date().valueOf(); // 获取当前的时间戳
        if (now - old > time) {
            fun(); // 执行函数
            old = now; // 更新旧时间戳
        }
    }
}

与防抖函数相同,要考虑到this指向和event改变的情况,因此引入两个变量,使用call函数更改this指向并且重新传入参数。

function throttle(fun, time) {
    let that, args;
    let old = 0;
    return function () {
        let now = new Date().valueOf(); // 获取当前的时间戳
        that = this; // 获取this
        args = arguments; // 获取参数
        if (now - old > time) {
            fun.apply(that, args); // 更改this指向并传入参数
            old = now; // 更新旧时间戳
        }
    }
}

示例代码:节流函数效果

    <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 throttle(fun, time) {
            let that, args;
            let old = 0;
            return function () {
                let now = new Date().valueOf(); // 获取当前的时间戳
                that = this; // 获取this
                args = arguments; // 获取参数
                if (now - old > time) {
                    fun.apply(that, args); // 更改this指向并传入参数
                    old = now; // 更新旧时间戳
                }
            }
        }
        // 为demo输入框注册keyup事件
        let init = 0; // 记录keyup事件被触发的次数
        demo.onkeyup = throttle(function () {
            count.innerHTML = ++init;
        }, 1000);
    </script>

4.2 使用定时器实现节流

节流函数有两个参数,并且返回值是一个函数,会修改this指向和event事件对象,那么它的框架就可以理出来了:

function throttle(fun, time) {
    let that, args;
    return function () {
        that = this;
        args = arguments;
        fun.apply(that, args);
    }
}

函数应该在定时器的回调函数中调用,因此还需要声明一个定时器变量timer,当定时器不存在时,触发定时器,调用函数。

function throttle(fun, time) {
    // timer是定时器对象
    let that, args, timer;
    return function () {
        that = this;
        args = arguments;
        if (!timer) {
            timer = setTimeout(function () {
                fun.apply(that, args);
            }, time);
        }
    }
}

但是当定时器timer一旦触发,就会永远有值,不可能再触发定时器了,因此需要在定时器回调函数中将time置为空。

function throttle(fun, time) {
    // timer是定时器对象
    let that, args, timer;
    return function () {
        that = this;
        args = arguments;
        if (!timer) {
            timer = setTimeout(function () {
                timer = null;
                fun.apply(that, args);
            }, 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 throttle(fun, time) {
            // timer是定时器对象
            let that, args, timer;
            return function () {
                that = this;
                args = arguments;
                if (!timer) {
                    timer = setTimeout(function () {
                        timer = null;
                        fun.apply(that, args);
                    }, time);
                }
            }
        }
        // 为demo输入框注册keyup事件
        let init = 0; // 记录keyup事件被触发的次数
        demo.onkeyup = throttle(function () {
            count.innerHTML = ++init;
        }, 1000);
    </script>

4.3 时间戳和定时器组合实现

从上面的效果可以看出,时间戳时间的节流函数,第一次输入文本会立即触发,但是当输入结束后就不再触发了,定时器实现的节流函数,第一次输入文本要等待一段时间后再触发,但是当输入结束之后还会再触发一遍。那么接下来实现一个第一次输入文本会立即触发,但是输入结束之后还会再次触发的节流函数。

首先将两个防抖函数合并一下:

function throttle(fun, time) {
    let that, args, timer;
    let old = 0; // 设置初始时间戳
    return function () {
        that = this;
        args = arguments;
        let now = new Date().valueOf(); // 获取初始的时间戳
        if (now - old > time) {
            fun.apply(that, args);
            old = now;
        }
        if (!timer) {
            timer = setTimeout(function () {
                timer = null;
                fun.apply(that, args);
            }, time);
        }
    }
}

这个防抖函数的时间戳和定时器同时在运行,那我们可以在定时器时间戳内部,定时器内回调函数执行一次,就将old的值设置为最新的时间戳。这样就可以让时间戳和定时器节流函数时间同步。

function throttle(fun, time) {
    let that, args, timer;
    let old = 0; // 设置初始时间戳
    return function () {
        that = this;
        args = arguments;
        let now = new Date().valueOf(); // 获取初始的时间戳
        if (now - old > time) {
            fun.apply(that, args);
            old = now;
        }
        if (!timer) {
            timer = setTimeout(function () {
                old = new Date().valueOf(); // 将old的值设置为最新的时间戳
                timer = null;
                fun.apply(that, args);
            }, time);
        }
    }
}

但是不应该让两个同步,接下来就执行定时器的防抖函数,在时间戳防抖函数中把定时器取消掉置为空。

function throttle(fun, time) {
    let that, args, timer;
    let old = 0; // 设置初始时间戳
    return function () {
        that = this;
        args = arguments;
        let now = new Date().valueOf(); // 获取初始的时间戳
        if (now - old > time) {
            if (timer) {
                clearTimeout(timer);
                timer = null;
            }
            fun.apply(that, args);
            old = now;
        }
        if (!timer) {
            timer = setTimeout(function () {
                old = new Date().valueOf(); // 将old的值设置为最新的时间戳
                timer = null;
                fun.apply(that, args);
            }, 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");
        // 节流函数省略
        // 为demo输入框注册keyup事件
        let init = 0; // 记录keyup事件被触发的次数
        demo.onkeyup = throttle(function () {
            count.innerHTML = ++init;
        }, 1000);
    </script>

4.4 节流优化

如果我们希望设计一个防抖函数,可以根据不同的情况来选择不同的防抖函数,也就是说,对上面三种情况再进行一个结合。那么我们可以设置options为第三个参数,根据传的值判断使用哪种防抖函数。options可以有两个参数:leading,表示是否打开第一次执行;trailing:表示是否打开最后一次执行。

function throttle(fun, time, options) { // options决定使用哪种节流效果
    let that, args, timer;
    let old = 0; // 设置初始时间戳
    if (!options) options = {}; // 如果没有该参数,置为空对象
    return function () {
        that = this;
        args = arguments;
        let now = new Date().valueOf(); // 获取初始的时间戳
        // leading为false,表示不打开第一次执行
        if (options.leading === false && !old) {
            old = now; // 这样会将下面的时间戳节流代码跳过
        }
        if (now - old > time) { // 第一次回直接执行
            if (timer) {
                clearTimeout(timer);
                timer = null;
            }
            fun.apply(that, args);
            old = now;
        }
        // trailing为false,表示不打开最后一次执行
        if (!timer && options.trailing !== false) { // 最后一次会被执行
            timer = setTimeout(function () {
                old = new Date().valueOf(); // 将old的值设置为最新的时间戳
                timer = null;
                fun.apply(that, args);
            }, time);
        }
    }
}

示例代码:节流函数的使用效果,打开第一次执行和最后一次执行

        demo.onkeyup = throttle(function () {
            count.innerHTML = ++init;
        }, 1000, { leading: true, trailing: true }); // 表示打开第一次执行和最后一次执行

打开第一次执行,关闭最后一次执行:

        demo.onkeyup = throttle(function () {
            count.innerHTML = ++init;
        }, 1000, { leading: true, trailing: false }); // 表示打开第一次执行,关闭最后一次执行

关闭第一次执行,打开最后一次执行:

        demo.onkeyup = throttle(function () {
            count.innerHTML = ++init;
        }, 1000, { leading: false, trailing: true }); // 表示打开第一次执行,关闭最后一次执行

如果两个都关闭,会出现bug,因此使用时不会将两个都关闭。

5 应用场景

防抖应用场景:

scroll事件滚动触发 搜索框输入查询 表单验证 按钮提交事件 浏览器窗口缩放,resize事件

节流应用场景:

DOM元素的拖拽功能实现 射击游戏 计算鼠标的移动距离 监听scroll滚动事件

本文学习于视频:

原文地址:https://blog.csdn.net/m0_46612221/article/details/124631926
57人参与, 0条评论 登录后显示评论回复

你需要登录后才能评论 登录/ 注册