js中函数节流&函数去抖

开篇先提几个问题？

1.做搜索框的时候你使用什么事件？change?blur?keyup？你想要的效果是什么？
2.scroll事件怎么就触发？是滚一段距离触发一次？还是滚一圈触发一次？还是滚一次触发一次？你想要那种？
3.mouseover事件是怎么触发呢？

带着我们的问题我们研究一下 throttle & debounce 是什么意思。

1.throttle节流，scroll和mouseover亦或者其他方式，每次移动都会触发代码效果，但是这些效果太密集了，占用了系统资源，计算机的计算能力是有限的，我们写的代码应该尽可能的优雅。
2.debounce去抖，本意是从 按键去抖 过来的，让我们的用户正确的操作之后才去执行代码，且只会执行一次，比如当我们做文本输入的时候，如果用keyup我们不是去节流，而是去判断用户停止了输入。
3.节流保证在一定时间内，只能触发一次。如果我们只要触发一次，这就是去抖。代码上来看差距不是很大。

好了接下里我们来自己写一个，尝试一番

//先来个有问题的代码
window.onscroll=function(){
    console.log(new Date());
}

看控制台的输出。知道这个有多么的恐怖了吧。

//我们先来个节流,每秒输出一次
window.onscroll=function(){
    if(window.onScrollTag == undefined){
        window.onScrollTag=true;
        console.log(new Date());
        setTimeout(function(){
            window.onScrollTag=undefined;
        },1000);
    }
}//先触发
window.onscroll=function(){
    if(window.onScrollTag == undefined){
        window.onScrollTag=setTimeout(function(){
            window.onScrollTag=undefined;
             console.log(new Date());
        },1000);
       
    }
}//后触发
//从上面的代码可以看出来，我们在一个事件执行的时候就把标记改成不可用。一秒后才可以再次触发操作。
//我们在尝试一下去抖
window.onscroll=function(){
    if(window.onScrollTag != undefined){
        clearTimeout(window.onScrollTag);
    }
    window.onScrollTag=setTimeout(function(){
         console.log(new Date());
    },1000);
}//消抖，消除抖动，感觉这个更好听

有没有什么现成的？

underscore,github上的
一次发现underscore源码bug的经历以及对学术界『拿来主义』的思考
JavaScript 函数节流和函数去抖应用场景辨析
underscore 函数去抖的实现