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 记录上次执行事件是否在等待中，如果是就返回，否则就开始新的等待。
如果您觉得本博客帮到了您，就打赏支持一下吧～
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
构建高可用Linux服务器(第3版)
余洪春 / 机械工业出版社 / 2014-10 / 79.00元
《构建高可用Linux服务器（第3版）》是Linux运维领域公认的经典畅销书，是国内51CTO、IT168等知名网站和多位资深运维专家共同推荐的运维工程师必备的工具书！ “酒哥”在Linux运维领域潜心实践近10年，一直在运维一线，技术和思维都紧跟时代的发展，非常清楚运维工程师们需要什么，应该学习什么。本书不仅是他近10年工作经验的结晶，同时也是他的数万名读者和数十万粉丝共同需求和集体智慧的......一起来看看 《构建高可用Linux服务器(第3版)》 这本书的介绍吧!
