节流: 规定的范围时间内就执行一次, 如果在这个单位时间内触发多次函数, 只有一次生效
实现代码:
<body>
<input type="text" id="input">
</body>
<script>
// 定时器实现
function throttle(fn, delay) {
let timer = null
let flag = true
return function (...args) {
if(!flag) return
clearTimeout(timer)
flag = false
timer = window.setTimeout(()=>{
fn.apply(this, args)
flag = true
}, delay)
}
}
let fn = throttle(function(e) {
console.log('节流成功', e.target.value);
}, 2000)
document.getElementById('input').addEventListener('input', fn)
// 时间戳实现
</script>
效果: 每2秒中执行打印一次, 实现了节流效果