js防抖函数和函数节流的应用场景

防抖函数 

防抖函数的定义：当事件触发完成之后再延迟触发，并且只触发一次，如果在触发之前再次触发，则会再次刷新延迟。

防抖函数的妙就妙在在触发后，会延迟触发，如果下次触发在这延迟时间中触发，则会重新设置延迟，大大的提高了效率

function debounce(callback,time = 300){
    let t = 0;
    return function(){
        clearTimeout(t);
        t = setTimeOut(callback,time);
    }
}

防抖函数应用在滚动条滑动事件

  先来看不定义防抖函数时——定义一个滚动条滚动事件--当鼠标滑动时，判断滚动条距离顶部的距离，若小于某个值则隐藏，若大于某个值则显示

    window.onscroll = function(){
        let num = document.body.scrollTop || document.documentElement.scrollTop;
        console.log("调用一次");
        if(parseInt(num) > 300){
            document.getElementById("imgs").style = "display:block";
        }else{
            document.getElementById("imgs").style = "display:none";
        }
    };

可以看到，鼠标轻轻一滑动，函数就会被调用这么多次。调用n次，就会有不知的n*n次判断，显然，这样的效率太低了。

再来看一下用到防抖函数。

    //防抖函数
    function debounce(callback,time=300){
        let t;
        return function(){
            clearTimeout(t);
            t = setTimeout(callback,time);
        }
    }

    window.onscroll = debounce(returntop,300);
    //
    function returntop(){
        console.log("调用一次");
        let num = document.body.scrollTop || document.documentElement.scrollTop;
        if(parseInt(num) > 300){
            document.getElementById("imgs").style = "display:block";
        }else{
            document.getElementById("imgs").style = "display:none";
        }
    } 

window.onscroll = debounce(returntop,300);

给鼠标滚动事件绑定函数debounce(returntop,300) 

而在代码执行的过程中，debounce函数先会被调用一次。这样，实则鼠标滚动事件绑定的函数是debounce函数返回的函数。 

这样一来，每当鼠标滑动一次之后，会在time时间之后，再进行判断回到顶部图标是否要隐藏还是展示，若是在time时间内再次滑动，则会清除上次的延迟，再来一个新的延迟。这样，代码的效率将会大大提升。

防抖函数还可以应用于搜索框（如百度），文本编辑器的自动保存。原理与上相同。 

 函数节流

函数节流原理：如果连续连续触发时间，每隔一段时间才会触发一次，中间连续的触发不会被执行。

    function throlle(callback,time=300){
        let oldtime = new Date().getTime();
        return function(){
            let now = new Date().getTime();
            if(now - oldtime > time){
                callback();
                oldtime = now;
            }
        }
    }

 应用在登录按钮——如果不设置函数节流，那么当用户连续点击登录时，后台就要接受n次，这样后台服务器的压力就会大大的激增。

若给登录按钮点击事件绑定函数节流，

例：document.getElementById("").οnclick= throlle(login,5000);

function login(){...}

给登录函数绑定节流函数，点击事件绑定其实是throlle函数返回的函数，执行代码时thtolle函数先被调用，获取一个时间戳，若是点击事件发生，则再获取一个时间戳，若是两值之差大于time则才会调用login函数，若小于则login函数不会被执行，这样就避免了用户连续点击登录给服务器带来的压力。

函数节流同样也可以应用到滚动条监听事件。

区别

函数节流不管事件触发有多频繁，都会保证在规定事件内一定会执行一次真正的事件处理函数，而防抖函数只是在最后一次事件后才触发一次函数。