JavaScript Порядок выполнения задачи

Question

следующие работы правильно:

alert("start"); 
loadData(); // takes a while 
alert("finished"); 

LoadData() представляет собой метод, который вставляет большое количество данных в таблицу в DOM и занимает несколько секунд.

Это, однако, не работает, как ожидалось:

document.getElementById("mydiv").style.display = "block"; 
loadData(); // takes a while 
document.getElementById("mydiv").style.display = "none"; 

Данные загружаются в таблицу без отображения mydiv до загрузки не будет завершена, а затем mydiv быстро отображается и ушел.

Но это работает, как это предполагается: отображается

document.getElementById("mydiv").style.display = "block"; 
alert("start"); 
loadData(); // takes a while 
alert("finish"); 
document.getElementById("mydiv").style.display = "none"; 

mydiv, диалоговое окно предупреждения показано, данные загружаются в таблицу, а затем mydiv исчезает, как и ожидалось.

Кто-нибудь знает, почему второй раздел кода выше не работает должным образом?

Answer 1

Я не знаю точной причины, но могу думать, что LoadData - это тяжелая функция, поэтому браузер занят оценкой этого, поэтому он поддерживает рендеринг. Когда u дает предупреждение, между ними предоставляется достаточное время для рендеринга div, а затем оценка LoadData.

Работа вокруг:

function LoadData() 
{ 
//Show Div here 
//window.setTimeout(newFunc,100); 
} 

function newFunc() 
{ 
//Do data operations here 
//Hide Div 
} 

Answer 2

Придумайте JavaScript, как вставить некоторые интерпретируемый код в большую программу. Более крупная программа выглядит примерно так:

void eventLoop() { 
    struct event event; 
    while(event = getEvent()){ 
     runJavascript(event); 
     runBrowserCode(); 
     if(viewHasChanged) { 
      redrawViewRegions(); 
     } 
    } 

} 

Это не совсем точная информация, но это дает вам немного идеи. Пока работает javascript-код, браузер ничего не делает: включая обновление представления. это не дошло до этого. Браузер gui не запускается в отдельном асинхронном потоке, параллельно с javascript, как вы, кажется, себе представляете. Браузеру нужно дождаться завершения javascript, прежде чем он сможет что-либо сделать.

Вы можете увидеть обновление gui при использовании предупреждений, потому что, хорошо ... Чтобы отобразить предупреждение, вам необходимо обновить gui! так что это своего рода частный случай.