[JS]防抖和节流

防抖(Debouncing)

像防抖还是很容易想到的，大概意思就是延时处理，然后如果在这段延时内又触发了事件，则重新开始延时

var t;
window.addEventListener('resize',function(){
    if(t) clearTimeout(t);
    t = setTimeout(function(){
        console.log(1);
    },500);
});

防抖函数确实不错，但是也存在问题，譬如图片的懒加载，我希望在下滑过程中图片不断的被加载出来，而不是只有当我停止下滑时候，图片才被加载出来。又或者下滑时候的数据的 ajax 请求加载也是同理。

与防抖相比，节流函数最主要的不同在于它保证在 X 毫秒内至少执行一次我们希望触发的事件 handler。

与防抖相比，节流函数多了一个 mustRun 属性，代表 mustRun 毫秒内，必然会触发一次 handler ，同样是利用定时器，看看简单的示例：

window.addEventListener('scroll',function(){
    var timeout,
        startTime = new Date();
    return function(){
        var curTime = new Date();
        clearTimeout(timeout);
        if(curTime - startTime >= 1000){
            fn1();
            startTime = curTime;
        }else{
            timeout = setTimeout(fn1,250);
        }
    }
}());

function fn1(){
    console.log('suceess');
}