js中防抖与节流的概念理解以及应用场景

最新推荐文章于 2022-08-01 18:48:12 发布

吹了一夜风~

最新推荐文章于 2022-08-01 18:48:12 发布

阅读量212

点赞数

分类专栏： javascript 文章标签： js

本文链接：https://blog.csdn.net/weixin_41240940/article/details/119346537

版权

javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

js中防抖与节流的概念理解以及应用场景

防抖

在开发中，如果需要监听滚动条滚动事件，或者输入框输入事件等高频事件时，如果每次都触发具体的操作的话，会使浏览器变的卡顿，影响用户体验，高频率触发ajax接口，更会增加服务器负荷

防抖的概念

持续触发事件时，在设定的事件内没有被再次触发，才会去调用事件处理函数，如果在设定时间内又被触发了，则不调用事件处理函数，并重置设定时间，重新开始延迟

防抖的实现

例如：在用户进行实时搜索的场景下，每次用户输入都会发起ajax请求，获取搜索结果，下面代码展示了

<!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>Document</title>
</head>
<body>
    <input type="text" placeholder="请输入" id="input">
    <script>
        let input = document.getElementById("input");
        //防抖函数
        function debounce(fn,time){
            time = time || 1000;
            let timer = null;
            return ()=>{
                //如果定时器存在，则清除定时器，重新延迟
                if(timer) clearTimeout(timer);
                timer = setTimeout(()=>{//延迟${time}秒后执行具体操作方法
                    fn();
                },time);
            }
        }
        function getInput(){
            console.log(input.value);
        }
        let fun = debounce(getInput,500);
        document.getElementById("input").addEventListener("keyup",function(e){
            getInput();//不使用防抖
            fun();//使用防抖

        })
    </script>
</body>
</html>

在输入框中快速输入字符，看看使用防抖与不使用防抖函数的区别

不使用防抖

如下图，可以发现，在一次输入中方法触发了几十次之多，实例代码没有发起ajax请求及一些复杂的处理逻辑，如果是实际场景中呢？在一次输入中（或者其他高频触发场景）下，要发起几十次ajax请求吗？

QQ截图20210325201540.png

使用防抖

不管我们如何快速的输入，事件在设定事件内(0.5s)，只会执行最后一次
QQ截图20210325201915.png

节流

在固定的事件内（例如：200ms）,函数只会执行一次，例如：高频点击事件中，只希望用户在设定时间内触发函数，如：200ms触发一次，在200ms毫秒内，多次点击无效

以用户输入为例：

<!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>Document</title>
</head>
<body>
    <input type="text" placeholder="请输入" id="input">
    <script>
        let input = document.getElementById("input");
        //防抖函数
        function throttle(fn,time){
            time = time || 1000;
            let timer = null;
            return ()=>{
                if(!timer){//定时器不存在，设置定时器
                    timer = setTimeout(()=>{
                        fn();
                        timer = null;
                    },time);
                }
            }
        }
        function getInput(){
            let now = new Date();
            console.log(now + '------'+input.value);
        }
        let fun = throttle(getInput,1000);
        document.getElementById("input").addEventListener("keyup",function(e){
            fun();//使用节流函数

        })
    </script>
</body>
</html>

如图：在高频输入场景下，具体事件处理函数只会在设定事件内（1s）执行一次
QQ截图20210325204125.png

简单总结

防抖和节流都是为了解决短时间内大量触发某函数而导致的性能问题，比如触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。

在高频触发场景下，在设定事件内，防抖函数只会延时触发最后一次
节流可以在设定事件间隔内只执行第一次

吹了一夜风~

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js中防抖与节流的概念理解以及应用场景

js中防抖与节流的概念理解以及应用场景防抖在开发中，如果需要监听滚动条滚动事件，或者输入框输入事件等高频事件时，如果每次都触发具体的操作的话，会使浏览器变的卡顿，影响用户体验，高频率触发ajax接口，更会增加服务器负荷防抖的概念持续触发事件时，在设定的事件内没有被再次触发，才会去调用事件处理函数，如果在设定时间内又被触发了，则不调用事件处理函数，并重置设定时间，重新开始延迟防抖的实现例如：在用户进行实时搜索的场景下，每次用户输入都会发起ajax请求，获取搜索结果，下面代码展示了<!D
复制链接

扫一扫