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);
};  

 

posted @ 2019-05-02 14:44  市民朱先生  阅读(194)  评论(0编辑  收藏  举报