js节流函数,防抖函数,实际使用案例

820 阅读1分钟

节流函数

const limit = (dosomething,time)=>{
    let canDo = true;
    return ()=>{
        canDo = false;
        setTimeout(()=>{
            dosomething();
            canDo = true;
        },time)
    }
}

使用场景

页面上的某些按钮有可能会连续的点击(如收藏按钮),但实际只想要执行成功一次,那么就可以使用节流函数。

防抖函数

const doLast = (dosomething,time){
    let timer = false;
    return ()=>{
        clearTimeout(timer);
        timer = setTime(()=>{
            dosomething();
        },time)
    }
}

使用场景

let things = ()=>{alert('最后执行')}
let func = doLast(things,100)
window.addEventListener('resize', func);
/*
有很多的场景可以使用,例如,使用echarts时,改变浏览器宽度的时候,希望重新渲染
echarts的图像,可以使用此函数,提升性能。(虽然echarts里有自带的resize函数)
*/