打印每个循环，而不仅仅是最终答案 - Print every loop, not just the final answer

Print every loop, not just the final answer

我希望程序在每次循环运行时打印更改 id "resposta" 的内部 HTML。但它只是在循环结束时更改值。我希望页面每秒更改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>

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

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);

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

最好像波纹管一样使用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);

演示

<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>

您可以使用

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>