阿贾克斯加载图像

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() 
    } 
}); 
}