MENU

Catalog

防抖节流

November 16, 2020 • Read: 322 • JavaScript

Grit

防抖

当持续触发某事件时,一定时间间隔内没有再触发事件时,事件处理函数才会执行一次,如果设定的时间间隔到来之前,又一次触发了事件,就重新开始延时。

function debounce(fn,wait){
    let timeout === null  //保存计时器变量 用到闭包
    return function(){
        if(timeout !== null) cleatTiomeout(timeout)
        timeout = setTimeout(fn,wait)
    }
}

节流

当持续触发事件时,有规律的每隔一个时间间隔执行一次事件处理函数。

function throttle(fn,wait){
    var prev = Date.now()
    return function(){
        var now = Date.now()
        if(now-pre>wait){
            fn()
            prev = Date.now()
        }
    }
}


function throttle(fn,wait){
    let valid = true
    return function(){
        if(!valid){
            return false
        }
        
        valid = false
        setTimeout(()=>{
            fn()
            valid = true
        },wait)
    }
}
322