摘要：节流保证在一定时间内，只能触发一次。我们在尝试一下去抖消抖，消除抖动，感觉这个更好听有没有什么现成的上的一次发现源码的经历以及对学术界拿来主义的思考函数节流和函数去抖应用场景辨析函数去抖的实现
开篇先提几个问题？
1.做搜索框的时候你使用什么事件？change?blur?keyup？你想要的效果是什么？
2.scroll事件怎么就触发？是滚一段距离触发一次？还是滚一圈触发一次？还是滚一次触发一次？你想要那种？
3.mouseover事件是怎么触发呢？
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,github上的
一次发现underscore源码bug的经历以及对学术界『拿来主义』的思考
JavaScript 函数节流和函数去抖应用场景辨析
underscore 函数去抖的实现
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/91109.html
摘要：上段代码的一个问题是，事件会在定时器结束后被触发，因此会出现一定的延迟，如果想让事件被立即触发，可以使用以下的去抖函数但是，对于去抖来说，在某些场景下是不合适的，因此我们可以使用节流。 参考文章游戏星人眼中的节流与去抖（很生动） 函数去抖与节流 Debounce：函数去抖就是对于一定时间段的连续的函数调用，只让其执行一次Throttle：函数节流就是让连续执行的函数，变成固定时间段间断...
摘要：函数节流和去抖的出现场景，一般都伴随着客户端的事件监听。函数节流的核心是，让一个函数不要执行得太频繁，减少一些过快的调用来节流。 概述 也是好久没更新 源码解读，看着房价蹭蹭暴涨，心里也是五味杂陈，对未来充满恐惧和迷茫 ...（敢问一句你们上岸了吗） 言归正传，今天要介绍的是 underscore 中两个重要的方法，函数节流和函数去抖。这篇文章不会涉及具体的代码实现（关于代码实现请期...
阅读 2491·2021-08-11 11:16
阅读 2929·2019-08-30 15:55
阅读 3333·2019-08-30 12:53
阅读 1569·2019-08-29 13:28
阅读 3266·2019-08-28 18:17
阅读 939·2019-08-26 12:19
阅读 2469·2019-08-23 18:27
阅读 701·2019-08-23 18:17
