189 8069 5689
function debounce(func, delay) {
高县ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：18980820575（备注：SSL证书合作）期待与您的合作！
let timer
//当前的this是指向window
return function (...args) {
//当前的this是指向dom元素
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() = {
func.apply(this, args)
}, delay)
}
}
例：div id="test"点击/div
实现隔3s执行一次的操作：
document.getElementById('test').addEventListener('click', debounce(function() {
console.log('执行完成之后的动作')
}, 3000))
记：事件回调函数里的this指向触发当前事件的DOM元素
1.search搜索联想，用户在不断输入值时，用防抖来节约ajax请求。
2.滚动条滚动的时候触发事件
1.鼠标不断点击触发，mousedown(单位时间内只触发一次)
2.上拉触底加载更多
在输入框输入时，要搜索某个字符串，基于性能考虑，肯定不能用户没输入一个字符就发送一次搜索请求，一种方法就是等待用户停止输入，比如过了500ms用户都没有再输入，那么就搜索此时的字符串，这就是防抖；节流比防抖宽松一些，比如我们希望给用户一些搜索提示，所以在用户输入过程中，没过500ms就查询一次相关字符串，这就是节流。
防抖的实现思路：每次触发事件时都取消之前的延时调用方法：
节流的实现思路：每次触发事件时都判断当前是否有等待执行的延时函数：
应用场景： input输入信息进行搜索，如果每敲一个字符就请求后台接口，给后台的压力太大了，所以做好防抖，即让程序只执行最后一次的事件。
为解决该问题，探索到了两个解决方案：
直接使用lodash工具库的debounce方法
参考网址：
应用场景： 滚轮滚动触发事件频繁，加上延迟可低频触发
看过了上面闭包防抖的写法，下面闭包节流的写法也很好理解了~
所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间，简而言之，防抖就类似回城，打断就得重新回。
代码实现
所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。简而言之，节流就类似技能需要冷却时间到了才能用。
代码实现
防抖和节流，这是前端防止用户频繁调用同一个接口的方法，比如短时间重复点击上传同一个文件，短时间重复点击提交同一个评论，异步的操作还没给你带来反馈，于是你重复上传了多个文件，重复提交了多个评论。
举例一个场景：为了例子更加简单，我们就用延迟来模拟一个后端接口返回的过程。
以上是一个发表评论的例子，由于接口一秒后才会响应评论反馈到界面上。
用户本意只是发布一条评论，但是由于接口需要响应时间，他以为自己的第一次点击没有生效于是就多点击了两次，结果显而易见，就是非用户本意的发布了三条一样的评论。
我们希望的是用户不要在请求还在进行的时候，频繁的重复发送请求。这时候就需要防抖节流了。
快速点击几次，还是只会发送一条评论。
但是缺点就是用户得到响应的时间更久了，得要算上延迟加上接口的响应。
速点击几次，还是只会发送一条评论。只有一条请求发布成功之后，才能够发布第二条请求，对于该场景十分合适。