Функция Javascript работает долго после того, как она называется

Question

Я пытаюсь вызвать функцию javascript внутри вызова ajax. Эта функция (функция progress внизу) должна вызываться каждый раз, когда цикл for запущен. Что на самом деле происходит, так это то, что progress выполняется столько раз, сколько цикл for запускается, но progress работает только после завершения остальной части кода.

Я выведу только важные части кода. Все переменные определяются как они должны быть. retData - это список объектов, к которым обращаются правильно. Единственной проблемой, которую я пытаюсь решить, является получение progress для выполнения во время выполнения цикла цикла, а не после.

function getAllProcess(){ 
    $.get(processUrl, function(retData){   
     if (navigator.appVersion.indexOf("Win")!=-1){ 
      windowsFillProcessTable(retData); 
     }else{ 
      linuxFillProcessTable(retData); 
     }//end else 
     $('#divForProcessTable table tbody').append(processHtml);  
    });//end get 
} 

function windowsFillProcessTable(retData){ 
    $('#divForProcessTable table tbody #processTableHeaders').append("<th>Session Name</th><th>Session #</th>"); 
    lengthOfList = retData.list.length; 
    step = 100/lengthOfList; 

    if (retData.list.length > 0){ 
     for (var i = 0; i < retData.list.length; i++){  
      numberOfLoaded++; 
      progress(step * numberOfLoaded, $('#progressBar')); 

      processHtml += '<tr><td><input type="checkbox" value="' + retData.list[i].pid + '">' + retData.list[i].pid + '</td><td>' + retData.list[i].name + '</td><td>' + retData.list[i].virtualMemorySize + '</td><td>' + 
      retData.list[i].user + '</td><td>' + retData.list[i].cpuTime + '</td><td>' + retData.list[i].status + '</td><td>' + retData.list[i].sessionName + '</td>' + 
      '<td>' + retData.list[i].sessionNumber + '</td></tr>';       
     }//end for 
    }//end if for length 
    else{ 
     processHtml = '<tr><td colspan="15">There are no processes matching that expression</td></tr>'; 
    } 
} 

//Loading bar action 
function progress(percent, $element) { 
    var d = new Date(); 
    console.log(new Date()); 
    var progressBarWidth = percent * $element.width()/100; 
    $element.find('div').animate({ width: progressBarWidth }, 500).html(percent + "%&nbsp;"); 
} 

Answer 1

Оказалось, что это возможно с помощью работников, но я не мог понять, как правильно их использовать. На данный момент я собираюсь отметить это как свой ответ, потому что никто другой не дал никаких указаний о том, как использовать рабочий поток для обновления DOM асинхронно. Кроме того, с работниками у вас нет доступа непосредственно к DOM. Список того, что вы не можете получить доступ с рабочими: DOM-(это не поточно-) Объект окна Документ объект Родительский объект

Я получил от этого: http://www.html5rocks.com/en/tutorials/workers/basics/

Answer 2

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

Вам нужно будет найти альтернативную схему для обновления вашего индикатора выполнения. См. this или this для возможных вариантов.