Question

我想迭代一定数量的页面，并使用ajax调用用内容填充它们。问题是，当我将ajax调用放在迭代函数中时，它存在javascript的同步性问题。在ajax调用完成之前，迭代已经继续。所以我做了一个解决方法，我在setTimeout中进行了ajax调用，效果很好。但我真的不喜欢这种方法，并且想知道是否有替代（更好）的解决方案。（我知道jQuery提供了一个async：true选项，但这不起作用）

function populatePages(i) {
    pageId = PageIds[i];
    containerId = pageIdContainer[i];
    $j.ajax({
        type: 'GET',
        dataType: 'html',
        url: url,
        data: { pageid: pageId, containerid: containerId },
        success: function(data) {
           //populate the DIV
        }
    });
} 


i = 0;
x = 50;
$j.each(pagesIds, function(){  
    setTimeout("populatePages("+i+")", x);
    x = x + 50;
    i++;  
});

Answer 1

试试这个（未经测试）

function populatePages(i) {
    console.log('populatePages', i)
    pageId = PageIds[i];
    return $.ajax({
        type: 'GET',
        dataType: 'html',
        url: '/echo/html',
        data: { pageid: pageId},
        success: function(data) {
        }
    });
} 


function messy(index){
    console.log('messy', index)
    if(index >= PageIds.length){
        return;
    }

    populatePages(index).always(function(){
        console.log('complete', index)
        setTimeout(function(){
            messy(index + 1)
        });//to prevent possible stackoverflow
    })
}

PoC：Fiddle

Javascript / jquery迭代异步问题

1 个答案: