Loading

JS函数防抖与节流

函数防抖 

频繁触发，只在特定的时间内执行一次代码。

应用场景：onrize,onscroll等频繁触发的函数，比如你想获取滚动条的位置，然后执行下一步动作 

//函数防抖 
function debounce(fn,delay){
    let timer = null;
    return function (){
        let args = arguments;
        if(timer) clearTimeout(timer);
       timer = setTimeout(()=>{
            fn.apply(this,args)
        },delay)
    }
}

函数节流

频繁触发，但只在特定的时间内没有再次触发执行函数，函数才会真的去执行。

应用场景：输入框自动补全时间，频繁操作点赞取消点赞等。

function throttle(fn,delay){
    let timer = null;
    return function(){
        let args = arguments;
        if(timer) return;
        timer = setTimeout(()=>{
            fn.apply(this,args)
            timer = null;
        },delay)
    }
}

事例

<body>
    <button id="btn1">普通点击</button>
    <button id="btn2">防抖点击</button>
    <button id="btn3">节流点击</button>
</body>

//普通点击
let btn1 = 0;
document.getElementById('btn1').onclick = function() {
    console.log(btn1++)//点击多少次，打印多少次
}

//防抖点击
let btn2 = 0;
function fnBtn2(b) {
    btn2++;
    console.log(btn2,b)
}
let b2 = debounce(fnBtn2, 3000);//函数初始化
document.getElementById('btn2').onclick = function() {
    b2('b2')//3s之内停止点击才会执行
}

//节流点击
let btn3 = 0;
function fnBtn3(b) {
    btn3++;
    console.log(btn3,b)
}
let b3 = throttle(fnBtn3, 3000);//函数初始化
document.getElementById('btn3').onclick = function() {
    b3('b3')//无论点击多少次，只会每3s执行一次
}
posted @ 2021-03-15 15:47  冯叶青  阅读(119)  评论(0)  编辑  收藏  举报