节流与防抖

前端摸鱼工程师

于 2023-03-22 19:58:59 发布

阅读量111

点赞数 1

文章标签： javascript 前端开发语言 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_43168511/article/details/129718004

版权

什么是节流防抖

节流：故名思意就是节省流量，防止某个事件的多次调用

防抖：防止抖动，也是为了防止一个事件被多次调用

为什么要使用节流防抖呢？

对于一系列快速触发的事件，特别是发送网络请求的时候，如果每次滚动屏幕都发送一次请求，那么短时间内可能发送很多次的请求，这样会造成比较大的网络开销，同时也会给浏览器渲造成压力，节流防抖的目的就是减少这些事件的触发次数

两者的区别

节流：在一段时间间隔内若有多次触发，则后面触发时会把前面的触发事件销毁，执行后面的触发，实际触发了很多次，但是只有最后一次有效果，看上去就像是只触发了一次

防抖：在一段事件内只触发一次，第一次事件触发后，会短暂的将事件锁死，时间过后才会事件才会被再次释放

下面是代码实现

节流模拟

下面模拟是使用but按钮点击发送网络请求，点击按钮时会触发点击事件的回调函数，回调函数就是自己定义的节流函数，函数的执行过程如下：

debounce函数中定义了一个timer变量用来存储定时器

1.点击按钮进入debounce函数

1.1若在时间间隔内是第一次执行点击事件，此时timer为空，于是给timer绑定一个定时器，在delay时间后执行callback函数

2.1若在时间间隔内不是第一次点击按钮，此时timer已经不为空，则会进入if分支，清除前面的定时器，重新绑定定时器

直到在触发事件后的delay时间里没有重新触发事件，则回调函数才会正真的执行

    letbut=document.getElementById("but");
                but.addEventListener('click',debounce(send,2000))
       functiondebounce(callback,delay){
            //设置一个包内的变量
            lettimer;
            return  function() {
    //设置一个定时器，如果定时器已经存在则清空定时器
            if(timer){
                 clearTimeout(timer)
                 }
            console.log("点击按钮了")
             //重新绑定定时器
            timer=setTimeout(callback,delay)
                }
             }
           functionsend(){
              console.log("点击按钮发送avax请求")
                }

防抖模拟

下面时模拟滚动屏幕来执行事件，滚动屏幕会触发事件，定义了一个变量来作为初始的事件，函数执行过程如下：

1.滚动屏幕，触发防抖函数

1.1若是时间间隔内第一次触发事件，此时事件与上一次的事件差大于delay，进入if分支，执行回调函数的同时更新time(这里涉及到js的执行机制，定时器是异步函数，更新time是同步操作)

2.1若在时间间隔内不是第一吃触发事件，则不会进入if分支，自然也不会执行回调函数，这样就实现了在时间间隔内只执行一次回调的效果。

    //使用防抖函数解滑动多次调用的问题
        window.onscroll=throttle(scrollP,1000)
        functionscrollP(){
           console.log("屏幕滑动了，重新发送请求")
                }
         //防抖函数，只调用一次
            functionthrottle(callback,delay){
                  lettime=0;
                  returnfunction(){
                       if(newDate()-time>delay){
                       console.log("滚动事件触发了")
                         setTimeout(callback,delay); 
                            }
                         time=newDate();
                     }
                }

全部代码：

    <!DOCTYPEhtml>
    <htmllang="en">
    <head>
        <metacharset="UTF-8">
        <metahttp-equiv="X-UA-Compatible"content="IE=edge">
        <metaname="viewport"content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .div1{
                height: 1800px;
                background-color: rgb(167, 49, 49);
            }
            .div2{
                height: 200px;
                background-color: rgb(9, 142, 60);
            }
        </style>
    </head>
    <body>
        <buttonid="but">发送请求</button>
        <divclass="div1">
            <divclass="div2"></div>
        </div>
    
        <script>
    
    //一个点击按钮的节流函数
                letbut=document.getElementById("but");
                but.addEventListener('click',debounce(send,2000))
                functiondebounce(callback,delay){
                    //设置一个包内的变量
                       lettimer;
                    return  function() {
                                //设置一个定时器，如果定时器已经存在则清空定时器
                               
                                if(timer){
                                    clearTimeout(timer)
                                }
                                 console.log("点击按钮了")
                                //重新绑定定时器
                                timer=setTimeout(callback,delay)
                        }
                    
                }
                functionsend(){
                            console.log("点击按钮发送avax请求",newDate())
                }
    
                
           
    
    //使用防抖函数解滑动多次调用的问题
                window.onscroll=throttle(scrollP,1000)
                functionscrollP(){
                    console.log("屏幕滑动了，重新发送请求")
                }
                //防抖函数，只调用一次
                functionthrottle(callback,delay){
                     lettime=0;
                     returnfunction(){
                       
                        if(newDate()-time>delay){
                             console.log("滚动事件触发了")
                            setTimeout(callback,delay); 
                        }
                         time=newDate();
                     }
                }
    
        </script>
        
    </body>
    </html>