一、理解防抖和节流
防抖：在单位时间内频繁触发事件，只有最后一次生效
比如：在游戏回城的时候被打断，再次点回城就会重新计时，最终只有没被打断的最后一次，才能成功回城，就是防抖
节流：在单位时间内频繁触发事件，只生效一次（也就是只有第一次生效）
比如：鼠标点击下一张轮播图，不管单位时间内连续点击了多少次，轮播图都是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>
本文转载自: https://blog.csdn.net/weixin_48082900/article/details/128901788
版权归原作者 Her... 所有， 如有侵权，请联系我们删除。
版权归原作者 Her... 所有， 如有侵权，请联系我们删除。