1、防抖
实现效果
只对最后一次键盘事件进行事件处理
<body>
<input type="text" id="input">
<script>
function fn(){
let time;
console.log('提前打印');
return function(){
clearTimeout(time);
time = setTimeout(()=>{
console.log('hello world');
},2000);
}
}
const input = document.getElementById('input')
/*
fn()会先执行,每次键盘事件都是执行的fn()里面的匿名函数,而不是fn函数,
比如console.log('提前打印');会在键盘事件之前就执行,
且无论怎么点击,console.log('提前打印')都不会执行
*/
input.addEventListener('keyup',fn())
</script>
</body>
2、节流
实现效果
规定的时间内无论点击多少次,都只会执行一次
<body>
<button id="btn">点击</button>
<script>
function fn() {
let time;
return function () {
if (!time) {
time = setTimeout(() => {
time = null;
alert('hello world');
}, 1000);
}
}
}
const btn = document.getElementById('btn');
btn.onclick = fn()
</script>
</body>
闭包就相当于提前开辟一块内存,每次都是在这块内存上面进行操作