函数闭包应用节流和防抖

2019-01-17  本文已影响0人  Chris__Liu

应用场景主要是用户频繁操作后,通过定时请求。可以减少服务器的请求次数。

防抖debounce

function debounce(fn,delay){
    let timer = null;
    return function(){
        let context = this
        let args = arguments
        clearTimeout(timer)
        timer = setTimeout(function(){
            fn.apply(context,args) 
        },delay)
    }
}
let flag = 0
function foo(){
    flag++
    console.log('Number of calls:%d',flag)
}

document.addEventListener('click',debounce(foo,1000))

节流 throttle

相对于防抖更加宽松,防抖主要是用户触发最后一次事件后,延迟一段事件触发,而节流会规定的时间内触发一次事件。

function throttle(fn,delay){
    let timer = null;
    let startTime = Date.now()

    return function(){
        let curTime = Date .now()
        let remaining = delay - (curTime -startTime)
        const context = this
        const args = arguments

        clearTimeout(timer)
        if(remaining<=0){
            fn.apply(context,args)
            startTime = Date.now();
        }else{
            timer = setTimeout(fn,remaining)
        }
    }
}
function xxx(){
    console.log('1')
}
document.addEventListener('click', throttle(xxx,5000))
上一篇下一篇

猜你喜欢

热点阅读