Question

我希望程序打印每次循环运行时都会更改id“resposta”的innerHTML。但它只是在循环结束时改变了值。我希望页面每秒都改变div的内容。

我有这段代码：

            <script>
            function sleep(milliseconds) {
              var start = new Date().getTime();
              for (var i = 0; i < 1e7; i++) {
                if ((new Date().getTime() - start) > milliseconds){
                  break;
                }
              }
            }

            function escrever(){
            for (i = 0; i < 10; i++) { 
                var resp = "Executando " + i;
                document.getElementById("resposta").innerHTML = resp;
                sleep(1000);

            }
             document.getElementById("resposta").innerHTML +=  "<br> fim";
            }

            </script>

Answer 1

最好使用setInterval / setTimeout来延迟执行函数而不是for循环

＆＃13;

function escrever(count){
    var ele = document.getElementById("resposta");
    if(count > 10){
        ele.innerHTML +=  "<br> fim";
        return;
    }
    ele.innerHTML = "Executando " + count;
    setTimeout(escrever.bind(null,++count),1000);
}

escrever(1);

＆＃13;

<div id="resposta"></div>

＆＃13;

Answer 2

您可以使用setTimeout()：

var timeout;
function sleepME(i){
    if(i <= 10){
        timeout = setTimeout((function(){
            var resp = "Executando " + i;
            document.getElementById("resposta").innerHTML = resp;
            sleepME(++i);
        }), 1000);
    } else {
        document.getElementById("resposta").innerHTML +=  "<br> fim";
        clearTimeout(timeout);   
    }
}
sleepME(1);

<div id="resposta"></div>

Answer 3

最好使用像bellow

这样的setInterval

var i = 0;
var interval = setInterval(function(){
    var resp = "Executando " + i++;
    document.getElementById("resposta").innerHTML = resp;
    if(i>=10){
        document.getElementById("resposta").innerHTML += "<br> fim";
        clearInterval(interval);
    }
},1000);

DEMO

Answer 4

<script>
$(document).ready(function(){
    var count=0;  
    interval =  setInterval(function() {   
     if(count<10){
    $("#resposta").html('test'+count);
     } else {
         clearInterval(interval); 
         }
     count ++;
    },1000);
});
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="resposta"></div>

打印每个循环，而不仅仅是最终答案

4 个答案: