闭包应用之函数防抖和节流

1. 函数的防抖：对于频繁触发某个操作，我们只识别一次

    <script>
    	  //debounce参数如下：
           // @params
            //func[function]：最后要触发执行的函数
            //wait[number]：“频繁”设定的界限
            //immediate[boolean]:默认多次操作，我们识别的是最后一次，但是immediate=true,让其识别第一次
        //@return
            //可以被调用执行的函数
        //主题思路：在当前点击完成后，我们等wait这么长时间，看是否还会触发第二次，如果没有触发第二次，属于非频繁操作，我们直接执行想要执行的函数func；如果触发了第二次，则以前的不算了，从当前这次再开始等待...
         function debounce(func,wait=300,immediate=false){
             let timer=null;
             //...params是匿名函数中的事件对象ev，传递的是参数
            return function anonymous(...params){
            //now的作用是一开始就让它触发
                let now=immediate && !timer;
                //每次点击之前都把之前设置的定时器清除
                clearTimeout(timer);
                //重新设置一个新的定时器监听wait时间内是否触发第二次
                timer=setTimeout(()=>{
                    //手动回归到初始状态
                    timer=null;
                    //wait这么久的等待中，没有触发第二次
                    !immediate ? func.call(this,...params):null;
                },wait);
                //如果是立即执行
                now ? func.call(this,...params) : null;
            };
        }
        function handle(){
            console.log('OK');
        }
        // submit.οnclick=handle;  //点击一次触发执行一次handle,频繁触发，频繁执行handle
        submit.onclick=debounce(handle,500,true);
    </script>

2. 函数节流：在一段频繁操作中，可以触发多次，但是触发的频率由自己决定

    <script>
        function throttle(func,wait=300){
            let timer=null,
                previous=0; //记录上一次操作的时间
            return function anonymous(...args){
                let now=new Date(),
                    remaining=wait-(now-previous); //记录还差多久达到一次触发的频率
                if(remaining<=0){              
                    window.clearTimeout(timer); 
                    timer=null;
                    //两次操作的间隔时间已经超过wait了
                    previous=now;
                    func.call(this,...args);
                }else if(!timer){
                    //两次操作的间隔时间还不符合触发的频率
                    timer=setTimeout(()=>{
                        timer=null;
                        previous=new Date();
                        func.call(this,...args);
                    },remaining)
                }
            }
        }
        function handle(){
            console.log('OK');
        }
        //window.οnscrοll=handle;  //每一次滚动过程中，浏览器有最快反应时间（5~6ms 13~17ms),只要反应过来就会触发执行一次函数（此时触发频率5ms左右）
        window.onscroll=throttle(handle); //控制频率为300ms触发一次
    </script>

总结：
点击要做的事情，一般是防抖；
滚动 scroll、输入过程中的模糊匹配 keydown，一般是节流，防止浏览器默认的频率过高。