JS中的防抖

秃头老菜鸟

已于 2022-04-20 00:11:55 修改

阅读量5.4w

点赞数 50

分类专栏：基础知识文章标签： javascript

于 2022-04-20 00:05:22 首次发布

本文链接：https://blog.csdn.net/weixin_49592687/article/details/124287056

版权

基础知识专栏收录该内容

10 篇文章 0 订阅

订阅专栏

防抖这里两个词可能对一些初入JavaScript的同学比较陌生,那这篇文章主要是针对这些同学们的,浅谈一下防抖

防抖:

1. "防抖"是什么

首先,先去解释一下什么叫做防抖, 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。纯理论是比较抽象的,还是用代码来的实在。
假设: 我有一个<input>标签,并想获得输入时的值,代码是这样的:

<body>
    <input type="text">
    <script>
        let input = document.querySelector("input");
        input.addEventListener('input',function(){
            console.log(this.value);
        })
    </script>
</body>

我们输入一些值之后,得出的效果是这样的:
防抖.gif
我们只是输入了 "前端"两个字,控制台中就打印了很多次,事件就执行了很多次。假设我们每一次输入都是和后台进行一次数据交互的话,那执行这么多次事件就会太影响性能了。
那么我们考虑的就是怎样减少与后台数据库请求的次数,那么防抖就应用而生了。
也就是说 用户触发时间过于频繁,只要最后一次请求的操作就叫做防抖

2. 怎么做

用户虽然触发了多次,但是我们想要的只是用户操作的最后一次,那么应该怎样去实现呢?
其实可以把问题简单化,我们只要隔一个固定的事件去获取一次用户输入的值,那么事件触发的次数就会减少,这个就是防抖的实现。
现在用代码去实现:

<body>
    <input type="text">
    <script>
        let input = document.querySelector("input");
        let time = null;//time用来控制事件的触发
        input.addEventListener('input',function(){
            //防抖语句
            if(time !== null){
                clearTimeout(time);
            }
            time = setTimeout(() => {
                console.log(this.value);//业务实现语句
                //这里的this指向的是input
            },500)
        })
    </script>
</body>

用 time 来控制事件的触发,然后建立一个延时器,用固定事件500ms来控制事件的触发,输出this.value ,那么之前,需要进行一个判断,判断time是不是有值,如果有值就去清掉time,然后下面的代码又重新赋值给time`。
防抖之后的效果图:
防抖实现.gif

优化:

防抖实现了,但是新的问题又来了,我们定义了一个全局变量time,而且防抖的代码和业务逻辑混到了一起了,那么这个代码就非常不利于维护。那么我们应该怎么解决这个问题呢?这时可以用闭包来封装一个防抖的函数

<body>
    <input type="text">
    <script>
        let input = document.querySelector("input");
        //input事件触发的时候,执行的是debounce返回的function,这个function里面有防抖和真正的业务逻辑
        input.addEventListener('input', debounce(function () {
            /* 
                用debounce函数去约束input这个事件,实际执行的函数是function函数,防抖的延迟是500ms
            */
            console.log(this.value);//业务代码
        }, 500));
        //需要让debounce的返回值是一个函数
        /* 
            fn : 回调函数  传进来的是正真的业务逻辑
            delay : 延时时间
        */
        function debounce(fn, delay) {
            let time = null;//time用来控制事件的触发
            return function () {
                if (time !== null) {
                    clearTimeout(time);
                }
                time = setTimeout(() => {
                    fn.call(this);
                    //利用call(),让this的指针从指向window 转成指向input
                }, delay)
            }
        }
    </script>
</body>

这样,一个真正工程化的防抖就完成了

秃头老菜鸟

关注

50
点赞
踩
147

收藏

觉得还不错? 一键收藏
11
评论
JS中的防抖

节流和防抖这里两个词可能对一些初入JavaScript的同学比较陌生,那这篇文章主要是针对这些同学们的,浅谈一下防抖和节流防抖:1. "防抖"是什么首先,先去解释一下什么叫做防抖, 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。纯理论是比较抽象的,还是用代码来的实在。假设: 我有一个<input>标签,并想获得输入时的值,代码是这样的:<body> <input type="text"> <script>
复制链接

扫一扫