使用JQuery循环Ajax请求之前的警报
我正在尝试有一个循环，在执行同步ajax请求之前要求用户进行确认，但它不按顺序工作。 这是我的代码：
$(document ).ready(function() { for(var i = 0; i < 3; i++) { alert("iteration "+i); $(".demo").easyOverlay("start"); $.ajax({ async: false, url: "http://rest-service.guides.spring.io/greeting" }).then(function(data) { $('.demo').append(data.id); $('.demo').append(data.content); $(".demo").easyOverlay("stop"); }); } }); 我对我的代码的行为是这样的：
- 要求第一次确认。
- 要求第二次确认。
- 要求第三次确认。
- 一个接一个地执行了三个ajax调用。
看起来由于某种原因所有的ajax调用都被延迟，直到警报全部被确认，我不知道为什么。 我试图在不使用循环的情况下实现我的目标，并且重复代码3次，我得到了同样的奇怪行为。
编辑：
如果我在’then（）’中放入以下行以检查html是否实际被修改，我可以在控制台中看到事情按顺序实际发生，并且它们只是在我确认每个警报之后才会出现在浏览器中是什么给人的印象是执行顺序不正确。 所以我需要弄清楚为什么反映对html所做的更改会延迟并且不会立即完成。
console.log($('.demo').html());
IMO jQuery.Deferred()对象将是最有前途的方式。
-
Deferred对象是通过调用jQuery.Deferred（）方法创建的
chainable utility对象。 它可以将多个回调注册到回调队列，调用回调队列，并中继任何同步或异步function的成功或失败状态。 -
deferred objects可用于处理异步事件 – 启动操作然后注册将在操作完成时调用的回调。 这包括AJAX，尽管还有很多其他用途。
哪里要求解决
function callAjaxMethod(url, step) { return $.Deferred(function() { //Confirm box for use inputs if(confirm(step)) { //Ajax call $.ajax(url).done(function(data){ //Do something //Update your HTML if needed }); } setTimeout(function() { //This will resolve your call again this.resolve(); }.bind(this), 1000); }) }
延期对象
var defer = $.Deferred().resolve(); var counters = [1, 2, 3, 4, 5]; $.each(counters, function(key, value) { defer = defer.then(function() { return callAjaxMethod('URL', value); }); });
完成后它会调用
defer.then(function() { //It will call when all done });
几乎没有文件
官方jQuery.Deferred
通过jQuery deferred调用ajax
关于多个jQuery承诺的文章
希望这可以帮到你:)
var $demo = $('#demo'); var ajaxURL = 'https://jsonplaceholder.typicode.com/posts'; function callAjaxMethod(url, step) { return $.Deferred(function() { //Confirm box for user inputs if(confirm(step)) { //Ajax call $.ajax(url).done(function(data){ //Do something //console.log(data); //Update the HTML OK $demo.append(step + ": Success" + "
"); }); } else { //Update the HTML when cancel $demo.append(""+ step +": Cancelled " + "
"); } //Use timeout to get the resolved setTimeout(function() { this.resolve(); }.bind(this), 1000); }) } //Defer object var defer = $.Deferred().resolve(); var counters = ['call 1', 'call 2', 'call 3', 'call 4', 'call 5']; //Loop your calls $.each(counters, function(key, value) { defer = defer.then(function() { return callAjaxMethod(ajaxURL, value); }); }); defer.then(function() { //It will call when all done $(demo).append("
"+"ALL DONE"); });
div { color: blue; font-size: 14px; }
那是因为你应该在Ajax请求回调中进行循环。 当你这样做时，整个代码以同步方式执行，而如果你在调用Ajax请求回调时这样做，请求和警报将像你期望的那样执行。
编辑：这是一个例子:(通用，你可以根据自己的需要定制它）
do(3) function do(i) { if (i === 0) return $.ajax({...}).then(function() { alert(...) do(i-1) }) }
每次ajax打电话它首先要求确认。 如果您允许那么只有ajax呼叫火并呼叫下一个ajax呼叫并要求确认等等。请检查下面的代码片段以获得更多的理解。
//call first time doAjax(1,3) //Function to call ajax repeatedly function doAjax(arrCount,maxCount) { if (confirm("iteration "+arrCount)) { $.ajax({ url: 'myUrl', type: "POST", data: { // data stuff here }, success: function (data) { arrCount++; //Next ajax call when current ajax call has been finished. if(arrCount<=maxCount){ doAjax(arrCount,maxCount); } } }); } }