函数节流和函数防抖

网上对函数节流和函数防抖的定义都各不相同。经常把节流说成防抖，把防抖说成节流。主要的原因是红皮书上的案例把市面上的函数防抖定义成了函数节流导致两者定义模糊不清。

这里也不讨论对错，我以网上博客的定义为准。

他们的作用：都是在X毫秒内把多个事件合并成一个

函数防抖

在x毫秒内把多个事件合并成一个，只执行最后一次（执行最后一次）

应用场景：验证用户输入，监听oninput或者onchange事件，ajax搜索栏(百度好像不是这么做的 orz...)

代码：

function debounce(fn,delay){
    var timeoutId=null;
    return function(){
        clearTimeout(timeoutId)
        timeoutId = setTimeout(function(){
            fn()
        },delay500)
    }
}

效果是：如果滚动间隔小于500，不管怎么拖动滚动条，函数都会在你停止拖动500毫秒后输出我执行了

函数节流

在X毫秒内把多个事件合并成一个并且至少执行一次（执行第一次）

应用场景：图片懒加载，下拉请求ajax等。

代码：

function throttle(fn,delay){
    var isReady=true
    return function(){
        if(isReady){
            isReady=false
            setTimeout(function(){
                fn()
                isReady=true
            },delay  500)
        }
    }
}

效果是：如果滚动间隔小于500m，疯狂拖动滚动条，函数还是会以500毫秒一次的速度输出我执行了