防抖与节流的应用方案

秒速五厘米 2023-02-16 12:12 15阅读 0赞

**防抖**：一段时间完成一个操作；  
**节流**：定时完成操作。

应用场景：

## 防抖： ##

1、seach搜索联想，用户在不断输入输入值时，用防抖来节约请求资源。  
2、windows触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发这一次。  
3、防止重复提交。  
节流：  
1、鼠标不断点击触发，mousedown(单位时间内只触发一次)。  
2、监听滚动事件，比如是否滑到底部自动加载更多，用throttle。

<!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <title>防抖与节流</title>
            <style>
                .container{ width: 400px;height: 200px;background: #ccc;text-align: center;font-size: 25px;line-height: 200px;}
            </style>
        </head>
        <body>
            <div class="container"></div>
        </body>
        <script>
        var count=1;
        var container=document.querySelector(".container");
        function getUser() { 
            this.innerHTML= count++;
        }
        // container.οnmοusemοve=demo(getUser,1000,true);//防抖
        container.onmousemove = time(getUser, 1000);//节流
    // *****************************************************************
    //防抖
        function demo(fn,wait,buber) { 
            var timer;
            return function () { 
                clearTimeout(timer);
                if(buber){ 
                    var callNow=!timer;
                    timer=window.setTimeout(function () { 
                        timer=null
                    },wait);
                    if(callNow){ 
                        fn.apply(this);
                    }
                }
                else{ 
                    clearTimeout(timer);
                    timer = window.setTimeout(fn.bind(this), wait);
                }
            }
        }
    // 节流
        function time(fn,wait){ 
            var pp=0;//参照物
            return function () { 
                var now= + new Date();//1970 1 1 到现在的毫秒数
                if(now-pp>wait){ 
                    fn.apply(this);
                    pp=now
                }
            }
        }
        </script>
        </html>