在for循环之前，事情发生在我的for循环之外javascript

问题描述

|| 我确定我之前已经看过此书，并且知道答案，但是12个小时后...我的想法完全糊涂了。 我有一个for循环，在该循环中，我尝试连接到字符串上，以便在我可以完成希望插入到html中并显示给用户的字符串（从而完成一个漂亮的小桌子）之后。 但是，函数的末尾（在for循环之后）在for循环执行之前就已被调用。

function getEntries() {

$(\'#entryTotalsDiv\').html(\'<img src=\"images/ajax-loader.gif\" /> ... retrieving form totals.\');

var entryTotalsTable = \"<table id=\'entryTable\' class=\'display\' style=\'border:1px;\'><thead><tr><th>Form Name</th><th>Hash</th><th>Entries</th></tr></thead>\" +
        \"<tbody>\"

//Get rows ONE at a time.
var countNumber = 1;
for (var frm = 0; frm < numberOfForms; frm++) {
    $.post(\'ajax/getEntries.aspx\',{
        \'formNumber\': frm
    },function (data) {
        entryTotalsTable += \"<tr><td>\" + data[0].formName + \"</td><td>\" + data[0].formHash + \"</td><td>\" + data[0].formEntryCount + \"</td></tr>\";

        //Now go and update the Form Retrieval div -- add 1 to the frm Number
        $(\'#formNamesDiv\').html(countNumber + \' of \' + numberOfForms + \' retrieved.\');
        countNumber++;            
    });
}
entryTotalsTable += \"</tbody></table>\";
$(\'#entriesDiv\').html(entryTotalsTable);
//Now bind the table to the DataTables JQ script
$(\'#entryTable\').dataTable();
$(\'#entryTable\').show(\'slow\');

} 如果您注意到了，我想在最后关闭Table html，但是在我的for循环完成之前调用了它，从而弄乱了我的字符串... ？

entryTotalsTable += \"</tbody></table>\";
$(\'#entriesDiv\').html(entryTotalsTable);
//Now bind the table to the DataTables JQ script
$(\'#entryTable\').dataTable();
$(\'#entryTable\').show(\'slow\');

}     

解决方法

        $ .post是异步的，这意味着它会尽可能快地触发循环中的所有请求，然后退出循环。它不等待响应。当响应返回时，您的行函数将被调用...但是到那时，所有帖子均已发送。 在这里查看此问题的答案... 如何让jQuery执行同步而不是异步的Ajax请求？ 您需要将$ .post更改为$ .ajax     ,        一种解决方案是将每个响应保存在数组中，并在每个回调中测试当前计数是否等于总计数。就像是：

var countNumber = 1,allData = [];

function runWhenFinished() {
    if(countNumber === numberOfForms) {
        var entryTotalsTable = \"<table id=\'entryTable\' class=\'display\' style=\'border:1px;\'><thead><tr><th>Form Name</th><th>Hash</th><th>Entries</th></tr></thead>\" + \"<tbody>\";

        for(var i = 0,l = allData.length; i < l; i++) {
             entryTotalsTable += \"<tr><td>\" + allData[i].formName + \"</td><td>\" + allData[i].formHash + \"</td><td>\" + allData[i].formEntryCount + \"</td></tr>\";
        }

        entryTotalsTable += \"</tbody></table>\";
        $(\'#entriesDiv\').html(entryTotalsTable);
        //Now bind the table to the DataTables JQ script
        $(\'#entryTable\').dataTable();
        $(\'#entryTable\').show(\'slow\');
    }
}

for(var frm = 0; frm < numberOfForms; frm++) {
    (function(frm) {
        $.post(\'ajax/getEntries.aspx\',{\'formNumber\': frm},function (data) {
            allData[frm] = data[0];
            countNumber++;
            $(\'#formNamesDiv\').html(countNumber + \' of \' + numberOfForms + \' retrieved.\');
            runWhenFinished();
        });
    }(frm));
}

我敢肯定，这仍然可以改善，但是您明白了。 如果您确实提出了70个请求，那么您可能还是要重新考虑您的策略。 70个并发请求很多。 例如。您可以提出一个请求，并证明应检索/更新的最小数量和最大数量/无论该方法在做什么。