各位高手求解决方案？

<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'testjs.jsp' starting page</title>
    
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">    
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->  </head>
  
  <body  onload="test()" >
  
  <script type="text/javascript">
   <!--
     function test() {
        var tempValue,temp='';
        var i=0;
        for(j=0;j<4;j++){
         i++;
            tempValue = i;
            temp+=tempValue;
           // alert("。。...temp value....。。"+tempValue);
            document.getElementById("card").value=temp;
            
        }
    }
   -->
  </script>
    
    <form name="myForm" method="post">
<table width="800" height="600" border="0" bgcolor="329884">
<tr>
    <td align="center" style="font-size: 24px"> 请输入账号</td>
    <td align="center"><input name="card" id="card" type="text" style="fontsize:24px;size=19" /></td>
</tr>
</table>
    </form>
  </body>
</html>
如上代码为什么文本框的值不可以依次显示，而是只有for循环完了之后显示最后一次的值？
各位朋友如果要让for循环的每一次值，都可以在文本框中依次显示，该如何改写？项目应用中，求救多谢了！

解决方案 »

  1.   

    “如果要让for循环的每一次值，都可以在文本框中依次显示”，那么需要一种中断条件，是计时？还是AJAX POST表单？
      

  2.   


    假如是计时可以得到跟没有计时的显示效果差不多吗？ajax post又该怎么实现，还请多多帮助，或者加我QQ也可以1402389038
      

  3.   

    那个for瞬间就执行完了，所以只能看到最后一个值。你可以让那个值每隔一定时间更新一次，比如隔一秒。可以参考js中的timer
      

  4.   


    我有试过timer可是好像并不可以解决问题？能否给个小例子参考下！
      

  5.   


    setTimeout是异步执行的，所以不会阻塞for循环，for循环一瞬间执行完了，延时后仍然是所有的赋值基本同事进行
    两种解决：
    1.简单的，每次循环增加延时，保证不同时赋值
     function test() {
    var tempValue,temp='';
    var i=0;
    for(j=0;j<4;j++){
    i++;
    tempValue = i;
    setTimeout(function()
               {
                 temp+=tempValue;
                 document.getElementById("card").value=temp;
               },j*500)
    // alert("。。...temp value....。。"+tempValue);
      
    }2.正确的方法，用回调控制，用递归实现循环
    var i=0;
    var tempValue,temp='';
    function test(j) {
    if(j>=4) return; //递归出口条件
    i++;
    tempValue = i;
    temp+=tempValue;
    document.getElementById("card").value=temp;
    setTimeout(function()//延时时间到后回调自身
               {
                   test(j-1) ;        
               },j*500)
    // alert("。。...temp value....。。"+tempValue);
      
    }