節流防抖封裝

懶得取名發表於2024-06-24

防抖:在持續觸發事件時,一定時間內沒有再次觸發,函式才會執行,若時間內再次觸發,將繼續延時

節流:在持續觸發事件時,一定時間內只執行一次函式

/**
 * 防抖
 * @param {function} func 函式
 * @param {int} time  毫秒
 */
let timeout = null;
function AntiShake(func,time){
    return function(){
        // 判斷定時器是否已存在,若存在則清除重新定時
        if(timeout != null){
            clearTimeout(timeout)
            timeout = null
        }
        timeout = setTimeout(func, time);
    }
}
/**
 * 節流
 * @param {function} func 函式
 * @param {int} time  毫秒
 */
let starttime = Date.now() 
function throttleOne(func,time){
    return function() {        
        let endtime = Date.now()        
        if (endtime - starttime > time) {          
            func()        
            starttime = Date.now()       
        }     
    }    
}
let status = true
function throttleTwo(func,time){    
    return function() {        
        if(!status){
            return
        }
        status = false
        setTimeout(() => {
            func()
            status = true
        }, time);
    }    
}

export {
    AntiShake,
    throttleOne,
    throttleTwo
}

相關文章