1.定义–最后一次事件触发时再执行处理函数
当一个事件持续触发时,我们期望在最后一次事件触发时再执行事件处理函数。
使用到清空定时器 clearTimeout(timer)
2.使用场景
在连续触发事件的场景中,仅仅需要在最后一次事件触发时执行事件处理函数,使用防抖
。比如根据输入框内容进行搜索查询、浏览器窗口resize后重新渲染页面等。
3.实例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<input type="text" value="" id="ipt1" />
<button id="btn1">按钮1</button>
<br />
<!-- 防抖
等待桌子不抖的时候再写作业
写作业:就是我们要执行的业务逻辑 handler
问题:如何判定桌子不再抖了
方案: 在桌子抖动时,我们加一个时间预期5秒,如果5秒内都没有再抖动,那么我们就写作业(执行handler);
如果在5秒内又有抖动,那就重新从新的抖动开始再计时。 -->
<script>
let btn1 = document.getElementById('btn1')
// 防抖前
// btn1.addEventListener('click', handler, false)
// 防抖后
btn1.addEventListener('click', debounce(handler, 1000), false)
function handler() {
console.log('按钮1被点击了 执行对应的业务逻辑')
}
// 1000ms
// 100ms 触发 200ms 触发 300ms触发 ... 900ms 触发 1秒触发
//每次点击都会触发debounce函数中function函数 初始点击时 timer为null 为timer设置定时器 延迟delay秒之后会执行fn函数 但如果持续点击按钮1 每次进入function函数都会先清空timer的定时器 定时器重新开始计时 直到delay秒后不再点击按钮1 执行fn函数 从而实现防抖功能
function debounce(fn, delay) {
let timer = null
// 每次click触发时 执行该函数
return function () {
// 只要触发点击,那就清理掉上次准备要执行的handler定时任务
clearTimeout(timer)
timer = setTimeout(() => {
//定时器执行机制 延迟delay 秒之后才会执行fn函数
fn()
}, delay)
}
}
function sum(a, b) {
return a + b
}
sum(1, 2)
// 在第二次执行函数时,无法取得上一次的数据
sum(2, 3)
</script>
</body>
</html>