JavaScript for循环与jquery不工作 - JavaScript for loop with jquery not work

JavaScript for loop with jquery not work

本文关键字：工作 jquery for 循环 JavaScript | 更新日期: 2023-09-27

我正在编写for循环来显示创建的链接，并使用这个循环:

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);
    });
}

，但在$.post函数url名称(data.succeeded[x].name)总是保持不变，只有url更新。但是如果我在第二行(after for() {)上使用console.log, url名称应该改变。

我做错了什么?

请不要在循环中执行像上面这样的异步调用，有太多的失败点。如果服务器超时，就会有许多请求聚集在一起，什么也不做，而且返回的顺序也得不到保证。最好在刚刚完成的AJAX回调中调用下一个AJAX调用，这样一切就井然有序了，并且可以保证一个请求在另一个请求完成之前不会发生:

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);