1. 什么是防抖

场景：比如快速多次点击轮播图的箭头按钮时，由于上一次图片切换还未结束，就开始了下一次图片切换，于是出现抖动现象。再比如输入关键字查询，每次输入时都触发事件并发起请求，而用户只需要最后一次的查询结果。

解决方案：定时器。

function debounce(fn, delay){
    var timer = null;

    if(timer){
        clearTimeout(timer)
    }else{
        timer = setTimeout(function(){
            fn.call(this)
        }, delay)
    }
}

btnEl.onclick = debounce(function(){
    // 业务代码
}, 1000)

2. 节流

场景：假如快速上拉加载20次，那么瞬间就会向服务器发送十次请求，这样便使页面加载速度变的很慢。而我们需要的是在规定的时间内只允许发送一次请求，超出这个时间再发送下一次请求。或者这么解释，当快速上拉加载20次，每次间隔时间很短，总体用时2s,那么假如规定只能500ms发出一次请求，那么较于上次发起请求的时间低于500ms的就不能发起请求了，所以，20次中只发起了5次请求（要加上第一次）。

解决方案1：时间戳

    function throttle(fn,delay){
        var start = 0;
        var now = new Date()
        if(now - start > delay){
            return function(){
                fn.call(this)
                start = now
            }
        }
    }

解决方案2：定时器

    function throttle(fn, delay){
        var timer = null;
        var _this = this;
        if(!timer){
            return function(){
                timer = setTimeout(function(){
                    fn.call(_this)
                    timer = null
                },delay)
            }
        }
    }

理解防抖和节流

1. 什么是防抖

2. 节流