防抖
什么是防抖
防抖策略是当事件被触发后，延迟n秒后再执行回调，如果在这n秒内事件又被触发，则重新计时。
举个例子，相信大多数人对于王者荣耀这个游戏也很熟悉吧，里面有个回城的特效，如下图，在人物下面会有一个进度条显示回城的进度，一般这个会有个678秒这样子，如果在回城过程被打断，那就会重新开始计时。
回城按钮就相当于一个事件，当按钮被点击就触发了事件，延迟n秒就是进度条的时间，执行的回调就好比回到泉水。如果这n秒的时间内被人打断了，再次点击回城按钮，进度条就会又从0%开始，再次经过n秒才能回到泉水。
防抖的应用场景
- search搜索框输入，只在输入完之后，才执行查询的请求，这样可以有效减少请求次数，节约请求资源
实现输入框的防抖👇
// 1. 防抖动的timer
var timer = null;
// 2. 定义防抖的函数
function debounceSearch(kw) {
timer = setTimeout(function() {
getSuggestList(kw)
}, 500)
}
// 为输入框绑定 keyup 事件
$('#ipt').on('keyup', function() {
// 3. 清空 timer
clearTimeout(timer)
//...省略其他代码
debounceSearch(keywords)
})节流
什么是节流
节流策略，顾名思义，可以减少一段时间内事件的触发频率。
举个例子，就好比英雄的技能，再如何疯狂点击，也只能等到技能冷却之后才能有效果，如下图：
节流的应用场景
- 鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次
- 懒加载时要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率，而不必去浪费CPU资源
防抖和节流的区别
- 防抖：如果事件被频繁触发，防抖能保证只有最后一次触发生效！前面N多次的触发都会被忽略！
- 节流：如果事件被频繁触发，节流能够减少事件触发的频率，因此，节流是有选择性地执行一部分事件！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/6257.html
