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 记录上次执行事件是否在等待中，如果是就返回，否则就开始新的等待。
如果您觉得本博客帮到了您，就打赏支持一下吧～
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
数据结构与算法经典问题解析
纳拉辛哈·卡鲁曼希 / 骆嘉伟 / 机械工业出版社 / 2016-6-1 / CNY 79.00
本书是一本数据结构方面的优秀教材，以Java为描述语言，介绍了计算机编程中使用的数据结构和算法。本书强调问题及其分析，而非理论阐述，共分为21章，讲述了基本概念、递归和回溯、链表、栈、队列、树、优先队列和堆、并查集DAT、图算法、排序、查找、选择算法（中位数）、符号表、散列、字符串算法、算法设计技术、贪婪算法、分治算法、动态规划算法、复杂度类型等内容。每章首先阐述必要的理论基础，然后给出问题集。全......一起来看看 《数据结构与算法经典问题解析》 这本书的介绍吧!
