关于防抖与节流的应用方案

谁借莪１个温暖的怀抱￠ 2021-09-19 04:22 167阅读 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.onmousemove=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>