Question

我有一些'ajax'调用（真的是sjax我想你可以调用它）而我正试图让它们一次在页面上进行渲染，但它们不是。它们都在最后渲染。我该如何将它们分开？

function getNames() { var names = $('#thenames').val(); alert(names); var splitnames = names.split(','); for(var i = 0; i < splitnames.length; i++) { var name = splitnames[i]; $.ajax({ type: 'GET', url: '/acert/secure/people/namesservice/getnamesajax.jsp', data: { usernames: name}, success: function(data) { $('#results').html($('#results').html() + data);}, async: false }); } } }

我不能冒险让他们以错误的顺序回来，所以我需要他们同步。我将它们放入for循环中，因此for循环应该让浏览器有机会在调用之间呈现，但我似乎无法实现它。

关于我做错的任何想法？

如果我在成功功能中添加了一个警告框，它可以正常工作，但我不想让这个操作保持原状，我只是想一次又一次地监视它的进展。

Answer 1

async: false 阻止浏览器。它完全锁定所有内容，包括重新绘制DOM。

我强烈强烈建议您不要使用async: false。这非常糟糕。

您可以在呼叫之间使用setTimeout，但不保证浏览器会触发重新绘制。

如果设置async: true，则不会出现此问题，但您可能需要更改代码才能正确处理异步行为。

async false is so bad jQuery decided to remove it from the API.

Answer 2

请勿使用async: false。

下面的代码将尽快运行所有ajax请求，然后以正确的顺序将内容附加到#results。如果您使用以下代码，请不要包含async: false。

var defArr = [];

for(var i = 0; i < splitnames.length; i++) {
    defArr.push( $.ajax({...}) );
}

$.when.apply($,defArr).done(function(){
    var $results = $("#results");
    $results.empty();
    for (var i = 0; i < arguments.length; i++) {
        $results.append(arguments[i][0]);
    }
});

Answer 3

假设您知道自己进行了多少次调用（或者可以将其作为返回结果的参数包含在内），您可以简单地异步触发调用，并在成功回调的数组中创建元素。当数组达到预期大小时，只需按顺序渲染它们。

Answer 4

首先，你似乎有一个额外的大括号。

但对于手头的问题更多，如果您只是想监控进度，那么您可以使用setTimeout吗？

- 更新 -

我想我得到了你想做的事。如果我没有弄错的话，你可以稍微重构一下，然后使用一个闭包和一个名字作为键的对象。像这样：

function getNames()
{
    var names = $('#thenames').val();
    var splitnames = names.split(',');
    var myData = {};


    for(var i = 0; i < splitnames.length; i++) 
    {
        (function(name) 
            { return function(){
            $.ajax({
                type: 'GET',
                url: '/acert/secure/people/namesservice/getnamesajax.jsp',
                data: { usernames: name},
                success: function(data) { myData[name] = data; updateNames(); }
            });

        })( splitnames[i] )
    }
}

这基本上做的是它立即设置了一堆ajax调用，中间的奇怪位用（function（）{}）（）确保你不会最终获取最后一个值循环结束时name被设置为。所有内容都会保存到myData，我想一旦每个人都加载了，您可以查看splitnames中的所有名称是否都在myData updateNames函数中。像

这样的东西

var count = 0; 
for ( var i = 0; i < splitnames.length; i++ ) 
{
    count += myData[splitnames[i]] != null ? 1 : 0; 
}

if (count == splitnames.length)
{
   // write the names to the screen
}

这有意义吗？

但是，说实话，最好的办法可能是更改getnamesajax.jsp，使其接受所有名称，然后按照您需要的顺序返回所需的信息。如果这是一个选项，那将是最好的，因为你只需要进行一次ajax调用。

html页面没有机会在ajax调用之间呈现

4 个答案: