0

我如何在 html 中更新 DOM，同时我正在执行“while sentece”。看下面的例子

<html>
  <body>
    <input type="text" id="element" >
    <input type="submit" id ="run" value="run">

    <script>
    function contar(){

        var contador=0;
        while( contador<10){

            setTimeout(function(){
                $('#element').val( contador );
            },1000);
                            //I use sleep or setTimeout to try to see the values
                            //if put its in the input.
            console.log("contando");
            contador++;
        }
    }
    function sleep(seconds){
        var e = new Date().getTime() + (seconds * 1000);
         while (new Date().getTime() <= e) {
         }
    }

    $('#run').bind('click',contar);


 </script>
 </body>
 </html>

语境：

我在while循环中有一个过程逻辑，这个过程生成我用来通过jquery或其他方式在视图中显示的数据。当我尝试实时更新内容时，这意味着当我尝试在 while 循环中更改某些值时，它不起作用。我所看到的只是生成流程逻辑的最后一个值。所以我想看看所有变化的数据。

例如在上面的代码中，我希望看到 1 ,2,3,..，值对值。

4

1 回答 1

1

您的代码的问题是，您的 while 循环

while(contador<10){  

    setTimeout(function(){
         $('#element').val( contador );
    },1000);

    contador++;
}

将以相同的 1000 毫秒延迟启动内部函数$('#element').val( contador );10 次，而不是在接下来的 1000 毫秒后执行每个代码。这样做的原因是，您的程序在调用时不会等待 1000 毫秒setTimeout();- 它只是启动另一个“类似线程”的​​东西，它将在 1000 毫秒后执行。但是程序本身将继续进行。

所以我认为您正在寻找类似的东西：

    // note these extra function
function updateValue(val){
    setTimeout(function(){
        $('#element').val( val );
    },1000 * val);
}

  . . .

var contador = 0;
while(contador<10){  
    updateValue(contador);
    contador++;
}

这是一个工作示例：jsfiddle

需要额外的功能来确保打印正确的数字。如果您在 while 循环中执行此操作，则该数字将始终是您的最大值。

于 2013-10-23T16:58:28.627 回答