for循环延迟执行
权耀扬
2016-06-13 11:44
<!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里显示一遍
1回答
-
- 铿锵顿挫
- 2016-06-13 13:15:51
<!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循环利用延迟调用而不是在外部使用间隔调用的话，会出错，因为延迟调用是异步执行的。
JavaScript进阶篇
468192 学习 · 21891 问题
相似问题