Javascript 使用JQuery在循环中发出Ajax请求前发出警报

我正在尝试创建一个循环，在执行同步ajax请求之前要求用户进行确认，但它无法正常工作。这是我的代码：

<script>
    $(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");
            });                         
        }       
    });
</script>

---

这是因为您应该在Ajax请求回调中执行循环。 当您以这种方式执行时，整个代码都是以同步方式执行的，而如果您在调用Ajax请求回调时这样做，则请求和警报将像您预期的那样执行

编辑： 下面是一个示例：（通用，您可以根据自己的需要进行自定义）

IMO

jQuery.Deferred（）

对象将是最有前途的方法

• Deferred对象是通过调用jQuery.Deferred（）方法创建的

  可链接实用程序

  对象。它可以将多个回调注册到回调队列中，调用回调队列，并中继任何同步或异步函数的成功或失败状态

• 延迟对象

  可用于处理异步事件-您启动一个操作，然后注册一个回调，该回调将在操作完成时调用。这包括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
});

文档很少

希望这对你有帮助：）

var$demo=$（'#demo'）；
var ajaxURL=https://jsonplaceholder.typicode.com/posts';
函数callAjaxMethod（url，步骤）{
return$.Deferred（函数（）{
//用户输入确认框
如果（确认（步骤））
{
//Ajax调用
$.ajax（url）.done（函数（数据）{
//做点什么
//控制台日志（数据）；
//更新HTML OK
$demo.append（步骤+”：Success“+”
）；
});
}
其他的
{
//取消时更新HTML
$demo.append（“+step+”：取消“+”
）；
} 
//使用timeout来解决问题
setTimeout（函数（）{
这个。解决（）；
}.绑定（本），1000）；
})
}
//延迟对象
var defer=$.Deferred（）.resolve（）；
变量计数器=['调用1'、'调用2'、'调用3'、'调用4'、'调用5']；
//循环你的电话
$.each（计数器、函数（键、值）{
defer=defer.then（函数（）{
返回callAjaxMethod（ajaxURL，值）；
});
});
defer.then（函数（）{
//一切完成后，它将呼叫
$（演示）。追加（“

”+“全部完成”）；
});
div
{
颜色：蓝色；
字体大小：14px；
}
每次ajax调用都会首先请求确认。如果您只允许ajax调用fire，调用下一个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);
                }               
            }         
        });
    }
}

//第一次呼叫
doAjax（1,3）
//函数重复调用ajax
函数doAjax（arrCount，maxCount）
{
if（确认（“迭代”+arrCount））{
$.ajax({
url:'myUrl'，
类型：“POST”，
数据：{
//这里有数据
},
成功：函数（数据）{
arrCount++；
//当前ajax调用完成后的下一个ajax调用。
if（arrCounti）我尝试了这段代码，并将$（'.demo'）.append（data.id）；的代码替换为alert（“demo”）它执行正确：迭代，演示，迭代，演示，迭代，demo@AmrMagdy：我也尝试过，您的建议是正确的。我将更新我的问题。我更改了代码以执行您的建议，但我仍然具有相同的行为。请将async设置为true，然后重试。相同的行为。@YoussefKhloufi:您可以使用$.Defer为了达到同样的效果，我已经更新了我的答案。你的解决方案完全按照我想要的方式工作，我会接受你的答案。你能简要解释一下为什么延迟方法解决了问题，以及为什么我的原始代码没有按预期工作。@YoussefKhloufi问题是，deffered正在等待以前的deffered在multip中得到解决le calls，我添加了文档，这将帮助您理解相同的概念。我更改了代码以执行您的建议，但我仍然有相同的行为。我不知道选项，但可能尝试将
async
设置为true？
defer.then(function() {
  //It will call when all done
});

//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);
                }               
            }         
        });
    }
}