防抖与节流是什么？如何实现？

最新推荐文章于 2024-04-26 21:00:00 发布

愛 / 滥 / 時

最新推荐文章于 2024-04-26 21:00:00 发布

阅读量295

点赞数 7

分类专栏：前端文章标签： javascript 开发语言 ecmascript ajax 前端

本文链接：https://blog.csdn.net/qq_48802092/article/details/126531049

版权

前端专栏收录该内容

63 篇文章 0 订阅

订阅专栏

♡ ‧₊˚ 定义 ‧₊˚ ♡

防抖（debounce）：当我们持续触发一个事件时，事件处理程序不会执行，只有当我们在设置的时间间隔里没有触发事件时，事件处理程序才会执行，若在这个时间间隔里被重复触发则重新开始计算。

节流（throttle）：无论事件触发得多么频繁，在规定的时间间隔内只执行一次事件处理程序。

目的：都是为了降低回调执行频率。节省计算资源

♡ ‧₊˚ 实现 ‧₊˚ ♡

防抖

代码实现如下：

<body>
    <input type="text" id="shuru">
    <button onclick="btnClick()">此处防抖</button>
    <script>
        // 防抖
        // 获取事件
        var shuru = document.getElementById('shuru')
        // 创建一个定时器
        var timeID = null
        // 绑定事件
        shuru.oninput = function(){
            // 每当用户点击/输入时就将前一个定时器删除
            clearTimeout(timeID)
            // 然后创建一个新的定时器
            // 如果用户在这个时间间隔内在此操作的话
            // 函数将不会被执行
            timeID =  setTimeout(() => {
                console.log(`你输入的值是${this.value}`);
            },1000)
        }
        // 执行后我们发现：当我们在输入框持续输入内容时控制台
        // 不会打印东西，当我们在设置的时间间隔一秒内没有进行输入操作的话
        // 控制台会将我们输入的值打印出来
    </script>
</body>

若不加入防抖，则我们每次在输入框里输入一个字符，控制台都会打印依次“你输入的值是…” ，而加入了防抖之后，若我每次在输入框中输入三个字符便停顿一次，那么在我们设置的这个时间间隔一秒之后，这个函数才会被执行一次，相应的语句被打印一次。

节流

代码实现如下：

<body>
    <input type="text" id="shuru">
    <button onclick="btnClick()">此处节流</button>
    <script>
        var lastTime = null
        function btnClick(){
            // 获取当前时间
            var currentTime = Date.now()
            // 从上一次到现在，还剩下多少多余时间
            if(currentTime - lastTime >= 3000){
                console.log('被点击了');
                // 将当前时间赋值给lastTime继续记录时间间隔
                lastTime = currentTime
            }
        }   
    </script>
</body>

无论我们点击得多么频繁，语句也只会三秒再打印一次。

♡ ‧₊˚ 应用 ‧₊˚ ♡

防抖在连续的事件，只需触发一次回调的场景有：

搜索框搜索输入。只需用户最后一次输入完，再发送请求
手机号、邮箱验证输入检测
窗口大小resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。

节流在间隔一段时间执行一次回调的场景有：

滚动加载，加载更多或滚到底部监听
搜索框，搜索联想功能

愛 / 滥 / 時

关注

7
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
防抖与节流是什么？如何实现？

若不加入防抖，则我们每次在输入框里输入一个字符，控制台都会打印依次“你输入的值是…” ，而加入了防抖之后，若我每次在输入框中输入三个字符便停顿一次，那么在我们设置的这个时间间隔一秒之后，这个函数才会被执行一次，相应的语句被打印一次。当我们持续触发一个事件时，事件处理程序不会执行，只有当我们在设置的时间间隔里没有触发事件时，事件处理程序才会执行，若在这个时间间隔里被重复触发则重新开始计算。无论事件触发得多么频繁，在规定的时间间隔内只执行一次事件处理程序。无论我们点击得多么频繁，语句也只会三秒再打印一次。...
复制链接

扫一扫