javascript - 在 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 是否实际被修改，我可以在控制台中看到事情实际上是按顺序发生的，并且它们不会出现在浏览器中，直到我确认每个alert 这就是给人的印象是执行顺序不正确。所以我需要弄清楚为什么反射(reflect)对 html 所做的更改会延迟并且不会立即完成。

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

Answer 1

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

• Deferred 对象是通过调用 jQuery.Deferred() 方法创建的可链接实用程序 对象。它可以将多个回调注册到回调队列中，调用回调队列，并中继任何同步或异步函数的成功或失败状态。

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

文档很少

Official jQuery.Deferred

Call ajax via jQuery deferred's

Article on Multiple jQuery promises

希望这对你有帮助:)

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>