JavaScript中计时器的bug及解决方法

JavaScript中计时器的bug

bug 1：当打开浏览器时，页面中的倒计时效果，会延迟一会才开始计时。

	var ospan = document.querySelector("#box1 span");
			var a = 100;
			setInterval(function(){
				ospan.innerHTML = a--;
			},1000);

解决方法1：只需在标签里填入初始值即可。

	<div id="box1">
		<span>100</span>
	</div>

	var ospan = document.querySelector("#box1 span");
			setInterval(function(){
				ospan.innerHTML --;
			},1000);

解决方法2: 在外部调用一次计时器的内置函数即可。

	var ospan = document.querySelector("#box1 span");
			var a = 100;
			function fn(){
			ospan.innerHTML = a--;
			}
			fn();
			setInterval(fn,1000);

bug 2：点击按钮，启动一个计时器，这时如果多次点击按钮，会创建多个计时器同时执行。

解决方法：在点击按钮时，先清除上一次执行的计时器。

	var btn = document.querySelector("#btn")
		var t1;
		var i = 0;	//设置一个状态码，0为暂停状态，1为计时状态
		btn.onclick = function(){
			if(i == 0){
				clearInterval(t1)	//先清除计时器
				t1 = setInterval(function(){	//再开启一个计时器
				ospan.innerHTML --;
				i = 1;	//开启后让状态码改变
				btn.value = "停止";
				},1000);
			}
			if(i == 1){
				clearInterval(t1);	//先清除计时器
				i = 0;	//清除后让状态码改变
				btn.value = "开始";
			}
			
		}