函数防抖和函数节流

在某些情况下某些函数会执行非意愿地很多次，比如说在拖动滚动条的时候，事件侦听会不停地做出回馈，极大地影响性能，此时就需要减少该函数的启动次数

函数防抖

“函数防抖”这个名字形象地表达了防抖的作用，比如在拍照过程中，手部不停地抖动这种细微操作，会非常形象我们想要的结果。

原理
只执行最后一次的结果
上一次的定时器会被消除，每一次的定时器还没来得及执行都会被下一次的消除，直到最后一次因为没有下一个定时器所以会执行

            var timmer=null;
            window.onscroll=function(){
//              函数防抖，只执行最后一次结果
//              上一次的定时器会被消除，每一次的定时器还没来得及执行都会被下一次的消除，直到最后一次因为没有下一个定时器所以会执行
                clearTimeout(timmer);
                timmer=setTimeout(function(){
                    console.log(1);
                },300)  
            }

函数节流

顾名思义，函数节流就是减少函数的执行次数，以达到性能提升的效果

原理
在一定的时间内限制函数的触发次数

            var isScroll=true;
//          记录上一次的时间
            var preTime;
//          记录用户滚动的时间
            var nowTime;
//          时间的间隔
            var deltaTime=2000;

            window.onscroll=function(){
                nowTime=new Date();
                if(!preTime){
                    preTime=nowTime;
                }
//              等价写法
//              preTime=preTime?preTime:nowTime;
//              优化
                if(nowTime-preTime>deltaTime){
                    console.log(1);
                    preTime=nowTime;
                }else{
//                  函数节流的核心代码
                    if(!isScroll){
//                      由于isScroll在200毫秒内保持为false，因此会执行这个函数，return直接终止了函数，所以不会执行下面的代码
                        return
                    }
                    isScroll=false;
                    setTimeout(function(){
                        console.log(1);
//                      在200毫秒以内,isScroll都是保持为false的
                        isScroll=true;
                    },200)
                }
                
            }

转载于:https://www.jianshu.com/p/aace708671b2