Яваскрипт. цикл с innerHTML не обновляется во время выполнения цикла

Я пытаюсь обновить div из Javascript в каждом цикле и увидеть 1, 2, 3,.... Следующий код работает, но выводит только конечный результат (9998). Как можно отобразить все шаги? Заранее спасибо.

<html>
<head>
</head>
<body>

<div id="cadre" style="width=100%;height=100%;">
    <input type="button" value="Executer" onclick="launch();"/>
    <div id="result" ></div>
</div>

<script type="text/javascript">
     function launch(){
        for (inc=0;inc<9999;inc++){
            document.getElementById('result').innerHTML = inc;
        }
     }
</script>

</body>
</html>
6
innerhtml javascript partial-page-refresh

3 ответов

var i = 0;

function launch(){
           var timer = window.setInterval(function(){
               if( i == 9999 ){
                   window.clearInterval( timer );
               }
               document.getElementById('result').innerHTML = i++;
           }, 100);
}

launch();
-2

выполнение JavaScript и рендеринг страницы выполняются в одном потоке выполнения, что означает, что во время выполнения кода браузер не будет перерисовывать страницу. (Хотя даже если бы он перерисовывал страницу с каждой итерацией цикла for, все это было бы так быстро, что у вас не было бы времени, чтобы увидеть отдельные номера.)

вместо этого вы хотите использовать setTimeout() или setInterval() функции (оба метода via setTimeout() - это очень распространенное метод.

и setTimeout() и setInterval() возвращает идентификатор, который по сути является ссылкой на таймер, который был установлен, который вы можете использовать с clearTimeout() и clearInterval() чтобы отменить любое выполнение в очереди, которое еще не произошло, поэтому другой способ реализации вашей функции заключается в следующем:

function launch() {
   var inc = 0,
       max = 9999;
       delay = 100; // 100 milliseconds

   var iID = setInterval(function() {
                            document.getElementById('result').innerHTML = inc;
                            if (++inc >= max)
                               clearInterval(iID);
                         },
                         delay);
}

очевидно, вы можете варьировать delay по мере необходимости. И обратите внимание, что в обоих случаях inc переменная должна быть определена вне функции, выполняемой таймером, но благодаря магии замыканий мы можем определить, что внутри launch(): нам не нужны глобальные переменные.

19

попробовать

document.getElementById('result').innerHTML += inc;
-1