JavaScript 基础：防抖与节流
栏目: JavaScript · 发布时间: 7年前
内容简介：今天，我们要讲的是防抖与节流的知识。防抖：当触发动作停够指定时间才触发事件节流：不管触发动作多么密集，事件之间的必须要有足够的间隔时间
今天，我们要讲的是防抖与节流的知识。
含义
防抖：当触发动作停够指定时间才触发事件
节流：不管触发动作多么密集，事件之间的必须要有足够的间隔时间
比喻
防抖：假如你有一个善变的老婆，如果她一会要你给她买品牌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 记录上次执行事件是否在等待中，如果是就返回，否则就开始新的等待。
如果您觉得本博客帮到了您，就打赏支持一下吧～
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Ordering Disorder
Khoi Vinh / New Riders Press / 2010-12-03 / USD 29.99
The grid has long been an invaluable tool for creating order out of chaos for designers of all kinds—from city planners to architects to typesetters and graphic artists. In recent years, web designers......一起来看看 《Ordering Disorder》 这本书的介绍吧!
