我使用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这发生在按下按钮时。
不要同步进行。使用回调。这是给您的演示: 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完成。
async