js中函数节流&函数去抖

linong

开篇先提几个问题?

1.做搜索框的时候你使用什么事件?change?blur?keyup?你想要的效果是什么?
2.scroll事件怎么就触发?是滚一段距离触发一次?还是滚一圈触发一次?还是滚一次触发一次?你想要那种?
3.mouseover事件是怎么触发呢?

带着我们的问题我们研究一下 throttle & debounce 是什么意思。

1.throttle节流,scroll和mouseover亦或者其他方式,每次移动都会触发代码效果,但是这些效果太密集了,占用了系统资源,计算机的计算能力是有限的,我们写的代码应该尽可能的优雅。
2.debounce去抖,本意是从 按键去抖 过来的,让我们的用户正确的操作之后才去执行代码,且只会执行一次,比如当我们做文本输入的时候,如果用keyup我们不是去节流,而是去判断用户停止了输入。
3.节流保证在一定时间内,只能触发一次。如果我们只要触发一次,这就是去抖。代码上来看差距不是很大。

好了接下里我们来自己写一个,尝试一番

//先来个有问题的代码
window.onscroll=function(){
    console.log(new Date());
}

clipboard.png
看控制台的输出。知道这个有多么的恐怖了吧。

//我们先来个节流,每秒输出一次
window.onscroll=function(){
    if(window.onScrollTag == undefined){
        window.onScrollTag=true;
        console.log(new Date());
        setTimeout(function(){
            window.onScrollTag=undefined;
        },1000);
    }
}//先触发
window.onscroll=function(){
    if(window.onScrollTag == undefined){
        window.onScrollTag=setTimeout(function(){
            window.onScrollTag=undefined;
             console.log(new Date());
        },1000);
       
    }
}//后触发
//从上面的代码可以看出来,我们在一个事件执行的时候就把标记改成不可用。一秒后才可以再次触发操作。
//我们在尝试一下去抖
window.onscroll=function(){
    if(window.onScrollTag != undefined){
        clearTimeout(window.onScrollTag);
    }
    window.onScrollTag=setTimeout(function(){
         console.log(new Date());
    },1000);
}//消抖,消除抖动,感觉这个更好听

有没有什么现成的?

underscore,github上的
一次发现underscore源码bug的经历以及对学术界『拿来主义』的思考
JavaScript 函数节流和函数去抖应用场景辨析
underscore 函数去抖的实现

阅读 4.8k

javascript-lNong
只此一生,何必从众

Read-Search-Ask

22.7k 声望
4.8k 粉丝
0 条评论

Read-Search-Ask

22.7k 声望
4.8k 粉丝
文章目录
宣传栏