Javascript - 循环内的 AJAX 请求

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

附言这发生在按下按钮时。

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>

Setting async to false blocks the main thread (responsible for executing JavaScript, rendering the screen, etc) and waits for the XHR to complete.

This is almost always a terrible idea. Users don't like unresponsive UIs. (https://stackoverflow.com/a/20209180/3112803)

只需在 stackoverflow 中搜索 ajax async: false，您就会发现许多关于此的很好的解释。每个人都会劝阻你不要使用 async:false。这是一个很好的解释:https://stackoverflow.com/a/14220323/3112803