Javascript 函数在调用后会运行很长时间

Question

我正在尝试在 ajax 调用中调用 JavaScript 函数。每次运行 for 循环时都应调用该函数(下面的 progress 函数)。实际发生的情况是，progress 的运行次数与 for 循环的运行次数相同，但 progress 仅在其余代码完成后才运行。

我只会发布代码的重要部分。所有变量均按其应有的方式定义。 retData 是正确访问的对象的列表。我试图解决的唯一问题是让 progress 在 for 循环执行期间而不是之后运行。

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

我认为您实际面临的问题不是 progress 在 for 循环完成时运行一次，而是 div 其中您试图反射(reflect)仅当 windowsFillProcessTable 完成执行时才会更新更改。由于 JavaScript 是单线程的 ( for now )，windowsFillProcessTable 的执行会阻塞所有其他处理，包括 DOM 更新。

您必须找到替代方案来更新进度栏。请参阅this或this了解可能的选项。