防抖和节流是闭包吗（防抖和节流有什么区别?）
一 、理解防抖和节流
防抖：在单位时间内频繁触发事件 ，只有最后一次生效
比如：在游戏回城的时候被打断 ，再次点回城就会重新计时 ，最终只有没被打断的最后一次 ，才能成功回城 ，就是防抖
节流：在单位时间内频繁触发事件 ，只生效一次（也就是只有第一次生效）
比如：鼠标点击下一张轮播图 ，不管单位时间内连续点击了多少次 ，轮播图都是2秒换下一张 ，就是节流
防抖和节流都是性能优化的一种手段
二 、相同点
1.都可以通过使用 setTimeout 来实现
2.都可以降低回调执行频率 ，节省计算资源
三 、不同点
1.定义不同
函数防抖：一段时间内连续触发事件 ，只执行最后一次
函数节流：一段事件内只执行一次
2.应用场景不同
防抖：（1）手机号 、邮箱地址的校验 （2）当用户input框输入完成后再发请求 ，如搜索等
节流： 高频事件 ，如：多少秒之后获取验证码 、resize 事件和scroll 事件等
四 、代码实现
1.防抖：
<body>
<input type="text" id="i">
<script>
// 1.防抖
document.querySelector(#i).addEventListener(input, () => {
debounce()
})
let timeId = null
const debounce = () => {
clearTimeout(timeId)
timeId = setTimeout(() => {
console.log("防抖最后一次输出");
}, 1000)
}
</script>
</body>
防抖实现效果：
2.节流：
<body>
<input type="button" id="btn" value="获取验证码">
<script>
// 2.节流
let flag = true // 设置控制开关
let timeId = null
const inp = document.querySelector(#btn)
inp.addEventListener("click", () => {
if (!flag) {
return
}
flag = false
let s = 5
timeId = setInterval(() => {
s -= 1
if (s < 1) {
inp.value = 获取验证码
flag = true
s = 5
clearInterval(timeId)
} else {
inp.value = s + 秒后再次获取验证码
}
}, 1000)
})
</script>
</body>
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！