Question

我试图在ajax调用中调用javascript函数。每次运行for循环时都应调用该函数（下面的progress函数）。实际发生的是progress运行的次数与for循环的运行次数相同，但progress仅在其余代码完成后运行。

我将仅发布代码的重要部分。所有变量都是如何定义的。 retData是正确访问的对象列表。我试图解决的唯一问题是在for循环执行期间运行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

我认为您实际面临的问题不是progress循环结束时for运行一次，而是您尝试反映该更改的div已更新仅在windowsFillProcessTable完成执行时。由于JavaScript是单线程的（for now），windowsFillProcessTable的执行会阻止所有其他处理，包括DOM更新。

您必须找到另一种方案来更新进度条。有关可能的选项，请参阅this或this。

Answer 2

事实证明，通过使用工作人员可能是可能的，但我无法弄清楚如何正确使用它们。截至目前，我将此标记为我的答案，因为没有其他人就如何使用工作线程异步更新DOM提供任何指导。此外，对于worker，您无法直接访问DOM。您无法与工人访问的列表： DOM（它不是线程安全的）窗口对象文档对象父对象

我从http://www.html5rocks.com/en/tutorials/workers/basics/

得到了这个

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

2 个答案: