防抖和节流函数

引入防抖和节流解决的问题：避免函数频繁，无限制的被调用，从而加重浏览器的负担，造成不必要的麻烦（常见的有鼠标移动onmousemove事件，存在人为鼠标抖动，造成频繁调用函数）

防抖

（防止频繁触发函数，例如鼠标移动的时候，鼠标抖动频繁触发函数）
最后一次触发有效。在限定事件内多次触发，前一次会被清除重新计时后一次的。
（借助于 setTimeout 来实现，当在设定事件内多次触发时，上次的延迟代码用clearTimeout清除掉，进行重新计时下一次的）

//计数
            var  n = 0;
            /**防抖
             * func：要执行的函数
             * time：等待的时间
             * */
         
            function debounce(func,time,isNow){
                console.log("大函数被调用，在重写的时候调用一次，之后便是执行下面返回的函数————————————————")
                let timeout=null
                //返回一个函数作为鼠标移动的重写函数
                return function(){
                        console.log(timeout)
                    //判断上回的是否执行完毕，没有清除进行最后一次重新计时    
                    if(timeout){
                        clearTimeout(timeout)
                    }
                    
                    if(isNow){
                        //立刻执行的防抖函数
                        var nowTime=!timeout
                        timeout=setTimeout(function(){
                            timeout=null
                        },time)
                        if(nowTime){
                            func();
                        }
                        
                    }else{
                        //非立即执行的防抖函数
                        timeout=setTimeout(function(){
                            func();
                            timeout=null
                        },time)
                        
                    }
                    
                    
                }
            }
            function move(){
                console.log("小函数调用"+(n++)+"次")
            }
            //重写当前元素的鼠标移动事件
            ///非立即执行    
            //document.onmousemove=debounce(move,2000,false)
            //立即执
            document.onmousemove=debounce(move,2000,true)

节流

控制函数的触发频率，来达到匀速触发
（借助于时间戳《几秒执行一次》，或者setTimeout 《每次调用都判断上回的是否运行完毕，再运行完毕后才触发下一次》）

/**
             * func：要执行的函数名
              * time：延迟的时间
             */
            
            function throttle(func,time){
                var timeout=null
                return function(){
                    //每回调用都判定上回是否运行完毕
                    if(!timeout){
                        timeout=setTimeout(function(){
                            func()
                            timeout=null
                        },time)
                    }
                }
                
            }
            function sc(){
                console.log("点击了"+(n++)+"次")
            }
            document.onmousedown=throttle(sc,1000)
            

区别

1. 防抖：在限制事件段内频繁触发会存在清除上一次，实现最后一次触发有效
2. 节流：控制函数的触发频率，来达到匀速触发