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