防抖和节流

2020-07-24  本文已影响0人  不行了快拦住我

//防抖
在第一次触发事件时,不立即执行函数,而是给出一个期限值
效果:如果短时间内大量触发同一事件,只会执行一次函数。
对于短时间内连续触发的事件(上面的滚动事件),防抖的含义就是让某个时间期限(如上面的1000毫秒)内,事件处理函数只执行一次。


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

//节流 (冷却时间)
让函数执行一次后,在某个时间段内暂时失效,过了这段时间后再重新激活(类似于技能冷却时间)
效果:如果短时间内大量触发同一事件,那么在函数执行一次之后,该函数在指定的时间期限内不再工作,直至过了这段时间才重新生效。


function throttle(func, wait){
    let timeout;
        return function(){
            if(!timeout){
                timeout = setTimeout(() => {
                    timeout = null;
                    func.apply(this, arguments)
                }, wait)
            }
    }
}
上一篇 下一篇

猜你喜欢

热点阅读