使用jquery的JavaScript循环不起作用

Question

I'm writing for loop to show created links and using this loop:

for (var x = 0; x < data.succeeded.length; x++) {

    $.post("{{URL::action('make')}}", {url: "{{URL::route('home')}}/uploads/" + data.succeeded[x].file, name: data.succeeded[x].name}, function(url) {

        anchor = document.createElement('a');
        anchor.href = url;
        anchor.target = '_blank';
        anchor.innerHTML = x + ' ' + data.succeeded[x].name + '<br><small>(' + url + ')</small>';

        succeeded.appendChild(anchor);
    });
}

but in $.post function url name (data.succeeded[x].name) allways stay the same only url updates. But if I use console.log on 2nd line (after for() {) url name changing as it should.

What did i wrong?

Answer 1

Please dont execuse async calls like the above within a loop, there are way too many points of failure. If the server times out, you have many requests pooling up and doing nothing as well as the order of return is not guaranteed. It's better to call the next AJAX call in the callback of the one that just completed, then you have everything in order and it guarantees that one request won't happen until the other completes:

function makeAjaxCall(position) {
    $.post("{{URL::action('make')}}", {url: "{{URL::route('home')}}/uploads/" + data.succeeded[position].file, name: data.succeeded[position].name}, function(url) {

        anchor = document.createElement('a');
        anchor.href = url;
        anchor.target = '_blank';
        anchor.innerHTML = position + ' ' + data.succeeded[position].name + '<br><small>(' + url + ')</small>';

        succeeded.appendChild(anchor);
        if (position < data.succeeded.length) makeAjaxCall(++position);
    });
}

makeAjaxCall(0);