Question

在尝试使用jQuery时，我有一个可能是新手错误的问题，但我似乎无法找到解决方案。这是代码：

$.get("index.html", function() {
    var i = 0;
    for (; i < 3; i++)
    {
        var lDiv = document.createElement('div');
        lDiv.id = 'body-' + i;
        document.getElementById('body').appendChild(lDiv);
        $.get('index.html', function(data) {
            lDiv.innerHTML = "<p>Hello World " + i + "</p>";
        });
    }
});

输出似乎是

<div id='body-0'></div>
<div id='body-1'></div>
<div id='body-2'>
    <p>Hello World 3</p>
</div>

我期望为每个i执行lDiv.innerHTML=代码，但显然它只针对最后一个执行？我在俯瞰什么？

Answer 1

由于$.get()是异步的，因此您需要在$.get()的{{1}}回调函数中执行追加和下一次调用。

success()

Answer 2

这是因为在任何回调被触发之前循环完成（i为2）。

@ thecodeparadox的解决方案可行，但它会序列化HTTP请求。（使它们一次一个火。）这允许请求并行执行，因此更快：

for (var i = 0; i < 3; i++) { var lDiv = document.createElement('div'); lDiv.id = 'body-' + i; document.getElementById('body').appendChild(lDiv); $.get('index.html', function(i,lDiv) { // the current iteration's `i` and `lDiv` are captured... return function(data) { lDiv.innerHTML = "<p>Hello World " + i + "</p>"; } }(i,lDiv)); // ...by passing them as an argument to the self-executing function }

嵌套异步调用似乎没有按预期执行

2 个答案: