阿賈克斯加載圖像

Question

我有一個奇怪的問題。

function sendEmail(settings) { 
    var success = false; 

    $.ajax({ 
     type: "POST", 
     contentType: settings.contentType, 
     data: settings.data, 
     url: settings.url, 
     dataType: "json", 
     async: false, 
     beforeSend: function() { 
      setTimeout(showOrHideLoadingImage("LoadingImage", "show"), 2000); 
      //$("#LoadingImage").show(); 
     }, 
     success: function (data) { 
      setTimeout(showOrHideLoadingImage("LoadingImage", "hide"), 500); 
      //$("#LoadingImage").hide();//Hide loading image 

showOrHideLoadingImage功能：

function showOrHideLoadingImage(id, action) 
{ 
    if (action == "show") { 
     $("#" + id).show(); 
    } else { 
     $("#" + id).hide(); 
    } 
} 

我使用此代碼來發送郵件，的郵件到達但ajaxLoading圖像不顯示

如果我把一個 「debuger」 「beforeSend」事件顯示圖像，所以我嘗試使用java腳本setTimeout函數 ，但沒有運氣。

*我有關於這個的另一個問題，ajaxSuccess和錯誤全局事件。

我紅認爲，它能夠更好地使用這些事件：

如果我將使用$（「＃LoadingImage」）每次，郵件加載圖像將顯示

但如果我有其他的ID與加載圖片？

Answer 1

你showOrHideLoadingImage被立即調用，使用在setTimeout一個匿名函數，然後使用參數調用你的方法：

setTimeout(function() { 
    showOrHideLoadingImage("LoadingImage", "show"); 
}, 2000); 

Answer 2

幾件事情要指出。開發人員通常會將代碼放入beforeSend方法中，該方法將立即執行。

因此下列情況屬實;

$.ajax({.... 
    beforeSend: function() { 
    $(....).show(); 
    } 

與之相同。其次，不要將您的加載圖像隱藏在success承諾的處理程序中。你想要always刪除加載器。

因此;

$(....).show(); 
$.ajax({...}).always(function(){$(...).hide();}); 

現在，超時將始終執行。即使AJAX快速執行。所以如果你只想在2秒延遲後顯示加載器。您需要保留計時器ID。

var timeID = setTimeout(function() { $(...).show();}, 2000); 
$.ajax({...}).always(function(){ 
    clearTimeout(timeID); 
    $(...).hide(); 
}); 

在always回調您使用timeID刪除定時器。這可以防止它在尚未發射的情況下發射。

如果我將使用$（「＃LoadingImage」）每次，郵件加載圖像將顯示

嘗試使用jQuery closest API找到DOM元素相對於是什麼觸發了事件。

http://api.jquery.com/closest/

Answer 3

$(document).ready(function(){ 
$(document).on('click', '#id', function(){ 
    sendMail(); 
}); 
}) 

function sendMail(){ 
$('#image').show(); 
$.ajax({ 
    url: url, 
    type: 'POST', 
    success: function(){ 
     //DO SOMETHING HERE 
    }, 
    error: function(){ 
     //DO SOMETHING HERE 
    }, 
    complete: function(){ 
    $('#image').hide() 
    } 
}); 
}