防抖和节流有什么区别?-Toy模板网

这篇具有很好参考价值的文章主要介绍了防抖和节流有什么区别?。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、理解防抖和节流

防抖：在单位时间内频繁触发事件，只有最后一次生效

比如：在游戏回城的时候被打断，再次点回城就会重新计时，最终只有没被打断的最后一次，才能成功回城，就是防抖

节流：在单位时间内频繁触发事件，只生效一次（也就是只有第一次生效）

比如：鼠标点击下一张轮播图，不管单位时间内连续点击了多少次，轮播图都是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>文章来源地址https://www.toymoban.com/news/detail-441695.html

防抖实现效果：

防抖和节流有什么区别?

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>