防抖和节流实现

发布于 / 前端 / 1 条评论

首先两者定义:

防抖,即短时间内大量触发同一事件,只会执行一次函数

节流: 间隔执行,函数节流即每隔一段时间就执行一次

// 防抖的原理:定义一个定时器,你第一次点击之后他就不是null了,等你再次在它还没有执行完你就再次点击时,他会重置定时器,意味着你点击再多,他都是以最后一次为准

function debounce(func,wait){
    let timeout = null
    return function(){
        let args = arguments
        let context = this
        if(timeout) clearTimeout(timeout)
        timeout = setTimeout(() => {
            func.apply(context,args)
        },wait)
    }
}

// 节流的原理就是判断当前运行该函数的时间减去上次运行的时间是否大于规定的时间
function throttle(func,wait){
    var pre = 0
    return function(){
        var context = this
        var args = arguments
        var now = Date.now()
        if(now-pre > wait){
            func.apply(context,args)
            pre = now
        }  
    }
}
转载原创文章请注明,转载自: ت » 防抖和节流实现
  1. avatar

    棒棒棒!!!