这两个都是和短时间内频繁多次触发同一事件相关的性能优化
防抖:
短时间内频繁触发同一事件时,只有最后一次生效. 例如电梯关门的效果
//'功能拆分': 设置一个延时定时器,在2s后获取输入输入的内容,
//如果2s内,用户输入了新的内容,就清除定时器,并重新开启一个定时器
// <input type="text" id="inpEle">
//获取元素 inpEle
var timer = 0
inpEle.addEventListener('input', () => {
// 1. 清除上一个定时器
clearTimeout(timer)
// 开启一个新的定时器
timer = setTimeout(function(){
console.log('输入框的内容', inpEle.value)
}, 2000)
})
节流:(获取时间戳的三种方式)
短时间内频繁触发同一个事件时,在单位时间内,只生效一次。例如lol英雄的大招
<body>
<input type="text" id="inp">
<button id="btn">戳我~~~~~~</button>
<script>
// '功能拆分':记录下当前的时间,当点击按钮后,记录下点击按钮时的时间;如果两次的时间间隔大于3s,就获取输入框的内容,并将当前时间保存给上一次的时间
// 获取时间戳的三种方式:::
// 现在时间
let nowTime = Date.now()
// let newtime = +new Date()
// let newtime = new Date().getTime();
btn.addEventListener('click', () => {
// 点击后时间
let clickTime = Date.now()
console.log(clickTime);
if (clickTime - newTime > 3000) {
console.log('没错我就是节流',inp.value);
// 记得把当前点击时间赋值给上一个点击时间,大于3秒
nowTime = clickTime
}
})
</script>
</body>