Jquery Ajax加载图像

我有个奇怪的问题

 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”事件中放入“Debugger”，则会显示图像，因此我尝试使用 java脚本setTimeout函数，但运气不好

*关于这一点，我还有一个问题，ajaxSuccess和error全球事件

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

如果每次使用$（“#LoadingImage”），则会显示邮件加载图像

---

但是如果我有其他id加载图像怎么办？

您的

showerhideloadingimage

立即被调用，请使用

setTimeout

中的匿名函数，然后使用参数调用您的方法：

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

---

有几件事需要指出。开发人员通常将代码放入打算立即执行的

beforeSend

方法中

因此，以下是正确的

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

是一样的

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

其次，不要在promise的

success

处理程序中隐藏加载图像。您希望

始终
删除加载程序

因此,

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

现在，将始终执行超时。即使AJAX执行得很快。因此，如果您只想在2秒延迟后显示加载程序。您需要保留计时器ID

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

在
始终
回调中，使用
timeID
删除计时器。这可以防止它在尚未开火时开火

如果每次使用$（“#LoadingImage”），则会显示邮件加载图像

尝试使用jQuery
closest
API查找与触发事件相关的DOM元素

setTimeout（函数（）{showOrHideLoadingImage（“加载图像”，“显示”）；}，2000）@mituw16当然，我已经编辑了我的问题。我想你可能会在这篇类似的帖子中找到一个解决办法：可能被骗？@Dave，就是这样。我删除了async:false，现在它工作了！您可以分析全局ajax事件吗？您应该使用
beforeSend
来访问原始jqXHR对象，而不仅仅是在调用之前执行代码：在这种情况下，只需将其放在调用之前。实际上，我希望“加载映像”能持续更长时间。。对于第二个问题，我删除了它。ajaxSuccess和error全局事件。我建议最好使用这些事件：如果我每次都使用$（“#LoadingImage”），邮件加载图像将显示出来，但是如果我在加载图像时有其他id呢？我实现了您在这里说的所有内容，现在工作正常完成：function（）和$.ajax（{}）。complete（function（…）{}）是同一件事，对吗？如果我正确地阅读了文档，它几乎是一样的（减去一些细微的差异），但我不建议使用“.complete（function（…）{}）”，因为它在JQuery库的1.8版本中被弃用，并且可能在以后的版本中被完全删除。好吧，所以$.ajax（{}）。complete（function（…）{}）是首选的，关于第二个问题。ajaxSuccess和error全局事件。我建议最好使用这些事件：如果我每次都使用$（“#LoadingImage”），邮件加载图像将显示出来，但是如果我有其他id和加载图像呢？很抱歉，响应太晚了。如前所述，“.complete”在jQuery1.8中被弃用。如果要使用此选项，请使用“.always（）”，因为这是新的替换项。有关AJAX调用的帮助，请参阅支持文档。关于图像，将ajax调用放入一个“函数”（类似于我的答案），然后将加载图像作为参数传递，因此它将是“$”（“#image”）.show（）”而不是“$（loadingImage）.show（）”，其中加载图像是sendMail函数的一个参数。但是，在不了解应用程序的第一手结构的情况下，我只是假设。这不是问题所在。
$(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()
   }
 });
}