在 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 對象是通過調用 jQuery.Deferred() 方法創建的chainable utility對象。 它可以將多個回調注冊到回調隊列中，調用回調隊列，並中繼任何同步或異步函數的成功或失敗狀態。

• 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 延遲調用 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" + "<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>

Answer 2

那是因為您應該在 Ajax 請求回調中進行循環。 當您這樣做時，整個代碼以同步方式執行，而如果您在調用 Ajax 請求回調時這樣做，則請求和警報將按您預期的方式執行。

編輯：這是一個示例：（通用，您可以根據需要對其進行自定義）

do(3)

function do(i) {
     if (i === 0) return
     $.ajax({...}).then(function() {
        alert(...)
        do(i-1) 
     })
 }

Answer 3

每次 ajax 調用 fire 它首先要求確認。 如果您允許，則僅 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);
                }               
            }         
        });
    }
}