Js节流（防连点）和防抖动

Js节流（防连点）和防抖动

1、防连点（节流）：类似游戏中的技能冷却时间，冷却时间内点击无效，解除冷却时间后点击才生效。

let lockState = false;	
/**
* 点击触发技能
*/
onClickSkill(){
	if(this.lockState === false){		//判断是否处于冷却状态
		this.lockState = true;			//冷却
		setTimeout(()=>{			
			this.lockState = false;		//解除冷却 （2s后）
		}, 2000)						//冷却时间 （2s）
	}
}

---

2、防抖动：防抖就是将函数的执行延迟一定时间，如果在该时间内重新触发事件，那么延迟的时间会重置，只有真正达到延迟时间，才会执行回调函数。 类似CSGO中枪支没子弹时，狂点射击，不触发自动换子弹（或者说重置换子弹操作的延迟时间），大概停止点击射击0.5s后才自动换子弹。M4A1的换消声器也是一样的效果 。

let timer = 0;
/**
* 点击射击
*/
onShoot(){
	console.log("shooting out");
	if(timer){						//判断是否存在定时器，有则清掉；
		clearTimeout(timer)
	}
	timer = setTimeout(()=>{		//清掉后，重置定时器。
		onAutoReload();
	},500)
},

/**
* 自动装子弹
*/
onAutoReload(){
	console.log("onReloading")
}

其他参考文档：Js节流和防抖动
壁纸放送：