美文网首页
js函数节流防抖

js函数节流防抖

作者: 职场丧尸 | 来源:发表于2018-12-23 17:56 被阅读0次

函数节流:一定时间内控制函数只能执行一次。
函数不可高频率执行
应用场景onscroll

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

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

函数防抖:是指频繁触发的情况下,只有足够的空闲时间,才执行代码一次。
只要在连续触发就不执行
应用场景:用户输入时的校验onkeydown

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

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

https://www.jianshu.com/p/3e8e31f99639

相关文章

网友评论

      本文标题:js函数节流防抖

      本文链接:https://www.haomeiwen.com/subject/fmqrqqtx.html