函数限流解释: 指定时间大量重复触发同一事件,那么在函数执行一次之后,该函数在指定的时间期限内不再工作,直至过了这段时间才重新生效
思路: 我们可以设计一种类似控制阀门一样定期开放的函数,也就是让函数执行一次后,在某个时间段内暂时失效,过了这段时间后再重新激活(类似于技能冷却时间)。
实现: 这里借助 setTimeout来做一个简单的实现,加上一个状态位 flag来表示当前函数是否处于工作状态.
HTML CODE
<input type = "text" id = "root" />
**JS CODE **
function throttle(fn) {
let flag = true
return function () {
if (!flag) {
return false
}
flag = false
setTimeout(() => {
fn()
flag = true;
},1000)
}
}
function sayOk(){
console.log("throttle success");
}
const ele = document.getElementById("root")
ele.addEventListener("input" , throttle(sayOk))