jQuery AJAX觸發得太快

Question

我有一個相對簡單的jQuery AJAX調用包裝在一個函數中，我正在測試我的錯誤功能。我面臨的問題是AJAX呼叫發生得太快！這導致我的'H6'和'.loading'元素開始重複。我需要的行爲是刪除元素，然後調用ajax。

function getAvailability(form) { 
    var str = $(form).serialize(), 
    warning = $('#content h6'); 

    if (warning.length > 0) { 
     $(warning).remove(); 
     $('<div class="loading">Loading&hellip;</div>').insertAfter(form); 
    } 
    else 
    { 
     $('<div class="loading">Loading&hellip;</div>').insertAfter(form); 
    } 

    $.ajax({ 
     type: "POST", 
     url: "someFile", 
     data: str, 

     success: function(calendar) { 
      $('.loading').fadeOut(function() { 
       $(this).remove(); 
       $(calendar).insertAfter(form).hide().fadeIn(); 
      }); 
     }, 
     error: function() { 
      $('.loading').fadeOut(function() { 
       $('<h6>Unfortunately there has been an error and we can not show you the availability at this time.</h6>').insertAfter(form); 
      }); 
     } 
    }); 

    return false; 
} 

我很想排序它就像 - >從頁面中刪除'警告'，添加.loading。然後觸發AJAX。然後淡出。加載，添加&淡入警告/日曆取決於成功。

---

我已經修改了我的原代碼，和我有做人的功能如預期，主要是因爲我已經在阿賈克斯過程中無效的提交按鈕。

function getAvailability(form) { 
    var str = $(form).serialize(), 
    btn = $('#property_availability'); 

    // Disable submit btn, remove original 'warning', add loading spinner 
    btn.attr("disabled", "true"); 
    $('.warning').remove(); 
    $('<div class="loading">Loading&hellip;</div>').insertAfter(form); 

    $.ajax({ 
     type: "POST", 
     url: "public/ajax/returnAvailability1.php", 
     data: str, 

     success: function(calendar) { 
      $('.loading').fadeOut(function() { 
       $(this).remove(); 
       $(calendar).insertAfter(form).hide().fadeIn(); 
      }); 
     }, 
     error: function() { 
      $('.loading').fadeOut(function() { 
       $(this).remove(); 
       $('<h6 class="warning">Unfortunately there has been an error and we can not show you the availability at this time.</h6>').insertAfter(form); 
       btn.removeAttr("disabled"); 
      }); 
     } 
    }); 

    return false; 
} 

我相信，預期由於該淡出創建的時間延遲（）函數的原始序列不能正常工作。

Answer 1

如果您需要對事件進行排序，那麼您應該嘗試使用屬於jQuery.ajax API一部分的延遲和承諾方法。本文做了很好的介紹：http://www.bitstorm.org/weblog/2012-1/Deferred_and_promise_in_jQuery.html

Answer 2

而不是添加和刪除warning，爲什麼不顯示/隱藏利用ajaxStart和ajaxStop？

warning.ajaxStart(function() { 
    $(this).show(); 
}).ajaxStop(function() { 
    $(this).fadeOut(); 
});