                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript进阶篇

for循环延迟执行

<!DOCTYPE HTML>

<html>

<head>

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>

</form>

</body>

</html>

怎么能让cf[i] 循环在input里显示一遍

权耀扬

2016-06-13

源自：JavaScript进阶篇 8-5

关注问题我要回答

1932

操作

收起

1 回答

铿锵顿挫
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循环利用延迟调用而不是在外部使用间隔调用的话，会出错，因为延迟调用是异步执行的。