javascript thread

Question

http://jsfiddle.net/andersb79/SNTb3/1/

В этом примере, когда вы нажимаете run. Активируется div после того, как он получил 1000 приветствий. Если я комментирую цикл for в начале и комментирую в другом цикле, анимация начинается до того, как приложение будет запущено.

Но тогда анимация не работает гладко. Можете ли вы каким-то образом сделать это, или это невозможно в javascript.

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

Надеюсь, что вы понимаете мое ожидание.

Answer 1

Если вы собираетесь добавить 10000 элементов за один раз, то будет блок любое другое действие, пока оно не закончится.

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

Лучший способ решить эту проблему - добавить элементы в партии, используя setTimeout для запуска следующей партии каждый раз.

Вычисление дает фоновое время для запуска любых других событий, таких как обработчики анимации.

См. http://jsfiddle.net/alnitak/yETt3/ для рабочей демонстрации с использованием дозирования. Ядро образца заключается в следующем:

var n = 0, 
     batch = 100; 

    function nextBatch() { 
     for (var i = 0; i < batch && n < 10000; ++i, ++n) { 
      $("#divDocument").append("<div>hello</div>"); 
     } 
     if (n < 10000) { 
      setTimeout(nextBatch, 0); 
     } 
    } 

    setTimeout(nextBatch, 0); 

который добавляет элементы 100 в то время, с setTimeout вызова позволяя поток обработки событий, чтобы перейти в и процессе анимации и другие события пользовательского интерфейса.

Answer 2

Например, вы можете использовать SetTimeout

$(document).ready(function() { 

      $(".openWindow").click(function() { 



       setTimeout(function() { 

       var divToShow = $("#divDocument"); 

       var windowWidth = $(window).width(); 
       var leftOut = (windowWidth * -1); 
       var leftIn = windowWidth + 500; 

       divToShow.css({ left: leftIn }); 
       divToShow.show(); 
       divToShow.animate({ left: 0 }, 400, function() { 
        divToShow.addClass("visibleDiv"); 
       }); 


      }, 2000); 



       for (var i = 0; i < 10000; i++) { 
        $("#divDocument").append("<div>hello</div>"); 
       } 


      }); 



     }); 

Если вы хотите запустить анимацию после этого элемента был добавить необходимо создать функцию дописать элементы и в конце этого вызова функции анимации. Если вы хотите запустить это как async, вы должны использовать setTimeout (func, 0) для анимации и для добавления элементов.