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图片未显示

如果我在“beforeSend”事件中放置“debuger”，则会显示图像，所以我尝试使用 java脚本setTimeout函数，但没有运气。

*我对此有另一个问题，ajaxSuccess和错误全局事件。

我认为使用这些事件更好：

如果我每次都使用$（“＃LoadingImage”），将显示邮件加载图像

但如果我有其他ID加载图片怎么办？

Answer 1

您的showOrHideLoadingImage正在被立即调用，请使用setTimeout中的匿名函数，然后使用params调用您的方法：

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

Answer 2

有几点需要指出。开发人员经常将代码放在旨在立即执行的beforeSend方法中。

因此以下情况属实;

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

与...相同。

$(....).show();
$.ajax({....

其次，不要在承诺的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()
   }
 });
}

Ajax加载图片

3 个答案: