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

Question

我正在尝试创建一个循环，该循环在执行同步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调用都被延迟，直到所有警报都被确认为止，而我不知道为什么。我试图在不使用循环的情况下实现我的相同目标，并且通过重复执行3次代码，得到了完全相同的奇怪行为。

编辑：

如果我在’then（）’中添加以下行以检查html是否确实被修改，我可以在控制台中看到这些事情实际上是按顺序发生的，直到我确认每个警报后它们才出现在浏览器中，这就是这给人的印象是执行顺序不正确。因此，我需要弄清楚为什么反射对html所做的更改会延迟并且无法立即完成。

console.log($('.demo').html());

Answer 1

IMO jQuery.Deferred()目标将是最有希望的方式。

• Deferred对象是chainable utility通过调用jQuery.Deferred（）方法创建的对象。它可以将多个回调注册到回调队列中，调用回调队列，并中继任何同步或异步功能的成功或失败状态。

• 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 Promise的文章

希望这对您有帮助:)

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" + "<br/>");

          });

        }

        else

        {

          //Update the HTML when cancel

          $demo.append("<font color='red'>"+ step +": Cancelled </font>" + "<br/>");

        }

        //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("<br/><br/>"+"ALL DONE");

});


div

{

  color: blue;

  font-size: 14px;

}


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="demo"></div>