开篇先提几个问题?
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()); }
看控制台的输出。知道这个有多么的恐怖了吧。
//我们先来个节流,每秒输出一次 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源码bug的经历以及对学术界『拿来主义』的思考