函数节流和函数防抖

应该有很多小白和我一样吧,对这个名字一点小小的陌生,在之前的开发中,丝毫没有觉得这个是一个很严重的问题,觉得还可以将就,有其他更重要的bug需要改,这个可以再缓缓。其实这个是个知识点呐。
函数节流:

//函数节流
var canRun = true;
document.getElementById('throttle').onscroll = function(){
    if(!canRun){
        //如果正在执行就不执行了
        return
    }
    canRun = false;
    setTimeout(function(){
        console.log('函数节流');
        canRun = true;
    },300)
}

目的:这样这个函数就在这300毫秒内只能调用一次咯。
函数防抖:

//函数防抖
var timer = false;
Document.getElementByid('debounce').onscroll = function(){
    clearTimeout(timer);
    timer = setTimeout(function(){
        console.log('函数防抖');
    },300)
}

目的:每次点都重新计数,这样会频繁触发函数但是不会执行内容,每次触发重新计算时间。

你可能感兴趣的:(函数节流和函数防抖)