性能优化之防抖、节流

防抖

高频率触发的事件，再指定事件内，多次执行，只会执行最后一次，常用与搜索，不断触发视口resize事件， 可用lodash插件实现。

function debounce(fn,time){
    let timeout = null
    return function(){
        if(timeout){
            window.clearTimeout(timeout)
        }
        timeout = setTimeout(() => {
            fn.apply(this,arguments)
        }, time)
    }
    
}

节流

高频率触发的事件，在指定的时间内只执行一次，可用lodash插件实现。鼠标不停点击事件，滚动事件...

function throttle(fn,time){
    let timeId = null
    return function(){
        if(!timeId){
            timeId = setInterval(()=>{
                         fn(this,arguments)
                         timeId = null
            },time)
        }else{
            return 
        }
    }
}