for循環延遲執行
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>計時器</title>
<script type="text/javascript">
var na = "小明:87;小花:81;小紅:97;小天:76;小張:74;小小:94;小西:90;小伍:76;小迪:64;小曼:76";
var cf = na.split(";");
function test01() {
for (var i = 0; i < cf.length; i++) {
document.getElementById("txt").value = cf[i];
}
}
</script>
</head>
<body>
<form>
<input type="text" id="txt">
<input type="button" value="start" onClick="test01()">
<input type="button" value="Stop" onClick="test02()">
</form>
</body>
</html>
怎么能讓cf[i] 循環在input里顯示一遍
2016-06-13
<!DOCTYPE HTML>
<html>
<head>
? ?<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
? ?<title>計時器</title>
? ?<script type="text/javascript">
? ? ? ?var na = "小明:87;小花:81;小紅:97;小天:76;小張:74;小小:94;小西:90;小伍:76;小迪:64;小曼:76";
? ? ? ?var index=0;
? ? ? ?var cf = na.split(";");
? ? ?? var time=setInterval("duang()",500);
? ? ? ?function duang(){
? ? ? ? ? ?if(index<cf.length){
? ? ? ? ? ? ? ?document.getElementById("txt").value=cf[index++];
? ? ? ? ? ?}
? ? ? ? ? ?else {
? ? ? ? ? ?? ? document.getElementById("txt").value="輸出完了！";
?????????????? clearInterval(time);
?? ? ? ? ?? }
? ? ? ?}
? ?</script>
</head>
<body>
<form>
? ?<input type="text" id="txt">
? ?<input type="button" value="start" onClick="test01()">
? ?<input type="button" value="Stop" onClick="test02()">
</form>
</body>
</html>
解答：因為使用for循環的話，執行太快，所以看不到一個一個出現的過程，所以需要使用間隔調用來給每個顯示一個空窗時間。特別注意的是這里如果使用for循環利用延遲調用而不是在外部使用間隔調用的話，會出錯，因為延遲調用是異步執行的。