Javascript – 循环中的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('
' + data +'
'); totalQuotes++; } }); counter++; } 

Ps会在按下按钮时发生。

Answer 1

不要同步这样做。 使用回调。 这是一个演示版： http ： //jsfiddle.net/y45Lfupw/4/

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

这几乎总是一个糟糕的主意。 用户不喜欢无响应的UI。 （ 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提供了一种基于零个或多个对象执行回调函数的方法，通常是表示异步事件的Deferred对象。

apply()将数组元素转换为函数中的不同参数

所有异步后，$ .done都是调用函数。 请求已完成。