Обновление страницы в середине цикла javascript

Я генерирую много контента на странице с помощью javascript, и я замечаю, что на странице ничего не отображается, пока javascript не закончит работу. Если вы запустите эту простую страницу, вы увидите цифры, отсчитываемые в консоли, а затем, когда цикл будет завершен, наконец, содержимое загружается на страницу.Обновление страницы в середине цикла javascript

<html> 
<head> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script> 
</head> 

<body> 
    Hello 

    <script> 
     $(function(){ 
      for(var i=9999; i>0; i--){ 
       console.log(i) 
       $('body').append('<p>' + i*i*i + '987987 Lorem ipsum dolor sit amet. </p>') 
      } 
     }) 
    </script> 
</body> 

</html>

Разве это не есть способ а) немедленно отображать статическое содержимое страницы и б) отображения каждого бита генерируемого текста, как только он будет создан? Правильно ли я предполагаю, что, если есть способ, он сильно замедлит цикл? Может быть, я мог бы пойти на компромисс, когда он сразу же отображает содержимое экрана, а затем будет автоматически проходить все остальное обычным способом. Я просто не хочу сидеть в течение нескольких секунд, чтобы ждать, чтобы увидеть содержимое на странице, когда я знаю, что он уже сгенерирован.

источник

2014-10-16 Moss

возможно дубликат [jQuery append в цикле - DOM не обновляется до конца] (http://stackoverflow.com/questi ons/19058858/jquery-append-in-loop-dom-does-not-update-to-end) – bruchowski

$(function(){ 
     var i= 9999; 
     var dothis = function() 
     { 
      console.log(i); 
      $('body').append('<p>' + i*i*i + '987987 Lorem ipsum dolor sit amet. </p>') 
      if(i == 0) { clearInterval(x); } 
      i--; 
     }; 
     var x = setInterval(dothis, 1); 
    });

и можно попробовать это

это несколько медленнее, чем цикл, но будет работать, как вам нужно

источник

2014-10-16 04:39:45

Это хорошее чистое решение. Но теперь я вижу, что все, что мне нужно, это заставить javascript приостановить хотя бы один раз. Поэтому для моей фактической страницы я просто запустил короткий цикл, чтобы заполнить начало страницы, а затем использовать setTimeout и запустить более длинный цикл. – Moss

Попробуйте эту

 for(var i=50; i>0; i--){ 
      myFunction(i); 

     } 

     function myFunction(i){ 
      setTimeout(function(){$('body').append('<p>' + i +'</p>');;},10) 


     }

Добавлен скрипку http://jsfiddle.net/thelgevold/pzcnnfgL/

источник

2014-10-16 04:26:07 TGH

Это не будет работать должным образом, потому что 'i' не будет иметь желаемого значения, если' setTimeout() ' вызывает его обратный вызов. – jfriend00

Это просто печатает 0 в каждом абзаце. – Moss

, потому что цикл for работает быстрее, чем функция таймаута –

Обновление страницы в середине цикла javascript

ответ

Смежные вопросы