我是一个前端老菜鸡,这是我第一篇文章,写点超级简单的东西。
防抖跟节流不是很复杂的东西,但是我由于他们十分相似在我初学时经常把他们弄混。
直到我把他们当成游戏中带有cd瞬发技能跟需要一段时间吟唱才能施法的技能我才没有弄混过。
防抖 ≈ 吟唱技能施法
防抖就像是游戏中的吟唱施法
如果说吟唱时间是两秒钟,那吟唱两秒钟之后才能施法
但是如果在吟唱过程中再次触发技能 则会打断现在的吟唱 重新开始吟唱
//fun表示游戏技能 chantTime吟唱时间
function debounce(fun, chantTime) {
// chantOut表示吟唱过程
let chantOut = null; //初始化吟唱过程
return function () {
if (chantOut) {
// 如果吟唱过程已经开始
clearTimeout(chantOut); //打断吟唱过程
chantOut = setTimeout(()=>{
fun();
chantOut = null;//初始化吟唱过程
}, chantTime); //重新开始吟唱
} else {
chantOut = setTimeout(()=>{
fun();
chantOut = null;//初始化吟唱过程
}, chantTime); //开始吟唱
}
}
}
节流 ≈ 施法CD
节流就像是游戏中施法CD
如果CD时间时2秒钟,那10秒钟之内你疯狂的摁技能也只能最多触发5次
function throttle(fun, cdTime) {
// ifCdFinish表示cd是否完成;
let ifCdFinish = true; //cd初始化
return function () {
if (!ifCdFinish) {
console.log('技能cd中')
return false;
}
技能cd开始
ifCdFinish = false;
fun(); // 技能释放
setTimeout(() => {
ifCdFinish = true; //技能cd重置
}, cdTime)
}
}
希望方便大家的理解,防抖跟节流还有很多其他的写法跟变种,大家可以参考其他的文章。
希望这不是懒惰的我的最后一篇文章。