JavaScript 基础：防抖与节流
栏目: JavaScript · 发布时间: 6年前
内容简介：今天，我们要讲的是防抖与节流的知识。防抖：当触发动作停够指定时间才触发事件节流：不管触发动作多么密集，事件之间的必须要有足够的间隔时间
今天，我们要讲的是防抖与节流的知识。
含义
防抖：当触发动作停够指定时间才触发事件
节流：不管触发动作多么密集，事件之间的必须要有足够的间隔时间
比喻
防抖：假如你有一个善变的老婆，如果她一会要你给她买品牌A，一会说要你给她买品牌B，你很烦，就对她说，当你做完决定， 一天 内不变，我就给你买。
节流：假如你有一个爱花钱的老婆，她一个月让你买 10 个包，你很烦，就对她说， 每个月 只能买 1 个包。
应用场景
防抖：一边在输入框里打字，一边发请求校验，可以用防抖技术，让用户停止输入足够时间后，再发请求。
节流：监听滚动事件（比如图片懒加载）时候，可以用节流技术，减少触发事件的执行次数，减少性能消耗。
代码
防抖：
function debounce(func, wait) {
var timeout;
return function () {
var args = arguments;
var context = this;
clearTimeout(timeout);
timeout = setTimeout(func.bind(context,args), wait);
}
}
利用柯里化消化 wait 参数，使用 setTimeout 延迟执行函数，如果新的触发动作进来，就取消上次的 setTimeout 。
节流：
function throttle(func, wait) {
var pending = false;
return function () {
if(pending) { return; }
var args = arguments;
var context = this;
pending = true;
setTimeout(() => {
func.apply(context, args);
pending = false;
}, wait);
}
}
利用柯里化消化 wait 参数，使用 pending 记录上次执行事件是否在等待中，如果是就返回，否则就开始新的等待。
如果您觉得本博客帮到了您，就打赏支持一下吧～
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Python算法教程
[挪威] Magnus Lie Hetland 赫特兰 / 凌杰、陆禹淳、顾俊 / 人民邮电出版社 / 2016-1-1 / 69.00元
本书用Python语言来讲解算法的分析和设计。本书主要关注经典的算法，但同时会为读者理解基本算法问题和解决问题打下很好的基础。全书共11章。分别介绍了树、图、计数问题、归纳递归、遍历、分解合并、贪心算法、复杂依赖、Dijkstra算法、匹配切割问题以及困难问题及其稀释等内容。本书在每一章结束的时候均有练习题和参考资料，这为读者的自我检查以及进一步学习提供了较多的便利。在全书的最后，给出了练习题的提......一起来看看 《Python算法教程》 这本书的介绍吧!
