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;
	}
}