Javascript-循环内的AJAX请求

小编典典

Javascript-循环内的AJAX请求

ajax

我使用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++;
}

ps这发生在按下按钮时。

阅读 356

2020-07-26

共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完成。

2020-07-26