JS计时器：用JavaScript完成电子表和发送取消系统

需求1：用Javascript做出一个电子表。

其中有两个按钮，按“开始”电子表显示当前系统时间，按“暂停”将当前时间暂停。

直到再次按“开始”，将暂停的刷新为当前系统时间。

很简单的小程序，重点在后面的BUG调试。

JS代码实现：

var id = null;

function start (){
	id = setInterval(function(){
		var text = 
			document.getElementById("text");
		var now = new Date();
		var time = 	
			now.toLocaleTimeString();
		text.innerHTML = time;
	},1000)

}

function pause (){
	clearInterval(id);
}

其中start是开始按钮的onclick属性。pause是暂停按钮的onclick属性。

BUG：当按下多次开始按钮，再按下暂停按钮时，时钟并不会暂停。

原因分析：按下多次开始按钮时，会产生多个Interval。

但id记录的是最后一次按下产生的Interval。

故就算按下暂停，停止的也只是最后一个Interval，其他Interval还在正常运行，所以时钟不会停。

解决：只产生一个Interval，多次按下按钮不重复产生Interval。

代码优化：

var id = null;

function start (){
	if(!id){
		id = setInterval(function(){
			var text = 
				document.getElementById("text");
			var now = new Date();
			var time = 	
				now.toLocaleTimeString();
			text.innerHTML = time;
		},1000)		
	}

}

function pause (){
	if(id){
		clearInterval(id);
		id = null;		
	}
}

经过优化以后，不管点击多少次，只会产生一个Interval。

需求2：模拟短信的发送和取消，点击“发送”按钮，提示框会显示“正在发送”，两秒后显示“已发送”，如果在两秒内点击取消。则提示“已取消”。

代码：

var id;
function send (){
	if(!id){
		var text = 
			document.getElementById("text");
		text.innerHTML = "发送中…";
		id = setTimeout(function(){
			text.innerHTML="已发送。";
		},2000);		
	}
}

function cancel() {
	if(id){
		clearTimeout(id);
		text.innerHTML="已取消。";
		id=null;
	}
}

同样出现了BUG：如果信息“已发送”，再点击取消，还是会出现“已取消”。

解决方法：添加布尔值：complete并添加到cancel的判断条件中。

进一步优化："已发送"一秒后回到初始状态，可以再次发送，添加reset函数。

var id = null;
var complete = false;
function send (){
	if(!id){
		var text = 
			document.getElementById("text");
		text.innerHTML = "发送中…";
		id = setTimeout(function(){
			text.innerHTML="已发送。";
			complete = true;
			setTimeout(function(){
				reset();
			},1000);
		},2000);		
	}
}
function reset() {				//重置函数。
	var text =
		document.getElementById("text");		//不将text设为全局变量，为了提高安全性
	text.innerHTML = "";
	id = null;
	complete = false;
}

function cancel() {
	if(id && !complete){
		clearTimeout(id);
		text.innerHTML="已取消。";
		id=null;
		complete = false;
	}
}