Question

我正在使用jQuery发送AJAX请求，从服务器检索数据。

然后将该数据附加到元素。这应该发生5次，但总是随机发生3次，4次或5次。基本上，有时循环会跳过AJAX请求，但大多数时候它会捕获它。我如何确保每次完成请求五次？以及跳过AJAX请求的随机行为背后的原因是什么？（旁注。我检查了请求错误，但它从未提醒过请求失败）

这是我的JS：

while (counter < 6) {
    $.ajax({
        url:'http://whisperingforest.org/js/getQuote.php',
        async: false,
        dataType: 'jsonp',
        success:function(data){
            $('.quoteList').append('<li>' + data +'</li>');
            totalQuotes++;
        }
    });
    counter++;
}

P.S。这发生在按下按钮上。

Answer 1

不要同步。使用回调。以下是您的演示： http://jsfiddle.net/y45Lfupw/4/

<ul class="quoteList"></ul>
<input type="button" onclick="getData();" value="Go Get It!">

<script>
var counter = 0;

window.getData=function()
{
    /* This IF block has nothing to do with the OP. It just resets everything so the demo can be ran more than once. */
    if (counter===5) {
        $('.quoteList').empty();
        counter = 0;
    }

    $.ajax({
        /* The whisperingforest.org URL is not longer valid, I found a new one that is similar... */
        url:'http://quotes.stormconsultancy.co.uk/random.json',
        async: true,
        dataType: 'jsonp',
        success:function(data){
            $('.quoteList').append('<li>' + data.quote +'</li>');
            counter++;
            if (counter < 5) getData();
        }
    });
}
</script>

将async设置为false会阻止主线程（负责   执行JavaScript，渲染屏幕等）并等待XHR   完成。

这几乎总是一个糟糕的主意。用户不喜欢没有反应   用户界面。（https://stackoverflow.com/a/20209180/3112803）

只需搜索ajax async: false的stackoverflow，您就会发现很多很好的解释。每个人都会阻止你使用async:false。这是一个很好的解释：https://stackoverflow.com/a/14220323/3112803

Answer 2

当您执行asyncroniouse请求的循环并检测所有ajax请求是否已完成时，jQuery提供了非常有趣的方法。可以使用

var users=["a","b","c","d","e","f","g","h"];

var async_request=[];
var responses=[];
for(i in users)
{
    // you can push  any aysnc method handler
    async_request.push($.ajax({
        url:'', // your url
        method:'post', // method GET or POST
        data:{user_name: users[i]},
        success: function(data){
            console.log('success of ajax response')
            responses.push(data);
        }
    }));
}


$.when.apply(null, async_request).done( function(){
    // all done
    console.log('all request completed')
    console.log(responses);
});

这里$ .when提供了一种基于零执行回调函数的方法   或更多对象，通常是表示异步的延迟对象   事件。

apply()将数组元素转换为不同的参数   功能

$。完成所有异步后调用函数。要求是   完成。

Answer 3

您可以像这样使用ES6 async / await Promise

function fromServer(){
  return new Promise((resolve, reject) => {
     $.ajax({
        url:'http://whisperingforest.org/js/getQuote.php',
        async: false,
        dataType: 'jsonp',
        success:function(data){
             resolve(data)
        }
    });
  })
}
var totalQuotes = 0;
async function domManipulation(){
    while (counter < 6) {
        var data = await fromServer();
        $('.quoteList').append('<li>' + data +'</li>');
        totalQuotes++;
    }
}

domManipulation()

JSFIDDLE

Javascript - 循环中的AJAX请求

3 个答案: