我正在尝试创建一个循环,该循环在执行同步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调用都被延迟,直到所有警报都被确认为止,而我不知道为什么。我试图在不使用循环的情况下实现我的相同目标,并且通过重复执行3次代码,得到了完全相同的奇怪行为。
编辑:
如果我在’then()’中添加以下行以检查html是否确实被修改,我可以在控制台中看到这些事情实际上是按顺序发生的,直到我确认每个警报后它们才出现在浏览器中,这就是这给人的印象是执行顺序不正确。因此,我需要弄清楚为什么反射对html所做的更改会延迟并且无法立即完成。
console.log($('.demo').html());
IMO jQuery.Deferred()目标将是最有希望的方式。
jQuery.Deferred()
Deferred对象是chainable utility通过调用jQuery.Deferred()方法创建的对象。它可以将多个回调注册到回调队列中,调用回调队列,并中继任何同步或异步功能的成功或失败状态。
chainable utility
deferred objects可用于处理异步事件-您启动一个动作,然后注册一个回调,该回调将在动作完成时调用。这包括AJAX,尽管还有很多其他用途。
deferred objects
哪里要求解决
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>