js函数节流和防抖

Posted 前端乐园

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js函数节流和防抖相关的知识,希望对你有一定的参考价值。

// 函数节流
var canRun = true;
document.getElementById("throttle").onscroll = function(){
    if(!canRun){
        // 判断是否已空闲,如果在执行中,则直接return
        return;
    }

    canRun = false;
    setTimeout(function(){
        console.log("函数节流");
        canRun = true;
    }, 300);
};

  

// 函数防抖
var timer = false;
document.getElementById("debounce").onscroll = function(){
    clearTimeout(timer); // 清除未执行的代码,重置回初始化状态

    timer = setTimeout(function(){
        console.log("函数防抖");
    }, 300);
};  

  

以上是关于js函数节流和防抖的主要内容,如果未能解决你的问题,请参考以下文章

JS函数节流和防抖

js的节流和防抖

js函数节流和防抖

JS中节流和防抖函数的实现和区别

JS函数的节流和防抖

JS的节流和防抖