函数节流和函数防抖

1. 概念

函数节流：指定时间间隔内只会执行一次任务；
函数防抖：指任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候任务才会执行；

2. 实现

//函数节流
function throttle(fn, interval){
    let canRun = true;
    return function(){
        if(!canRun) return false;
        canRun = false;
        setTimeout(()=>{
            fn.apply(this, arguments)
            canRun = true;
        },interval)
    }
}
//函数防抖
function debounce(fn, await){
    let timmer = null;
    return function(){
        clearTimeout(timmer);
        timmer = setTimeout(()=>{
            fn.apply(this, arguments)
        }, await)
    }
}

3. 应用场景

函数节流：监听页面滚动要节流
函数防抖：监听input输入要防抖，用户短时间内多次点击同一个按钮。

转载于:https://www.jianshu.com/p/34da8b7d5719