防抖函数
当持续触发事件,一定时间内没有再触发事件事件处理函数才会执行一次,如果设定的时间到来之前,又触发了事件就重新开始延时。
触发事件一段时间内没有触发事件执行肯定是定时器
(在设定的时间内又-次触发了事件重新开始延时代表的就是重新开始定时器)
(那么意味着上一次还没有结束的定时器要清除掉重新开始)
<input type="text" name="" id="txt">
<script>
const input = document.querySelector("#txt")
function debounce (delayed, callback) {
// 保存timeId 用于清除定时器
let timeId
// 返回函数生成闭包,造成内存泄漏
return function () {
clearInterval(timeId)
timeId = setTimeout(() => {
// 执行回调函数
callback()
}, delayed)
}
}
input.addEventListener('keyup', debounce(300, function() {
console.log(input.value)
}))
</script>
节流函数
我们可以设计一种类似控制阀门一样定期开放的函数,也就是让函数执行一次后,在某个时间段内暂时失效,过了这段时间后再重新激活(类似于技能冷却时间)
当持续触发事件的时候保证一段时间内只调用次事件处理函数
一段时间内只做件事情
const btn = document.querySelector('button')
function throttle(delayed, callback) {
let temp = true;
return function () {
if (!temp) return false
temp = false
callback()
setTimeout(() => {
temp = true
}, delayed);
}
}
btn.addEventListener('click', throttle(1000, function () {
console.log(123);
}))