为什么加载程序图像不显示？答案

【问题标题】：why loader image is not showing?为什么加载程序图像不显示？
【发布时间】：2016-12-21 04:27:34
【问题描述】：

我有一个功能需要一些时间才能完成它的过程。所以我打算显示过程图像，直到它完成。

请看这里的示例。当用户单击按钮时，进程将启动。这里我放了 setTimeout 函数来做延迟。但是处理图像没有显示。

如果我将隐藏图像的代码放在 setTimeout 函数中，它就可以工作。

但在实际代码中也不起作用。

我也试过

$.when($("#loaderImg").show()).done(function(){
showSomeProcess()
$("#loaderImg").hide();
})

所以请帮助我处理这个示例代码。我不明白为什么没有显示处理图像。

【问题讨论】：

查看这个答案：stackoverflow.com/questions/16599915/…
@user1490835 它与 Ajax 无关。
演示工作正常。你的实际代码是做什么的？提供minimal reproducible example
@charlietfl 对不起....那是我努力工作。请检查更新的。
什么更新？将所有相关代码放在问题本身中。问题应该是自包含的，并且演示仅用于支持问题本身实际存在的内容。很难弄清楚你的问题到底是什么

标签： jquery .when

【解决方案1】：

使用 promise 将解决您的问题。还更新了小提琴https://jsfiddle.net/3espztjw/5/

$("#startProcess").click(function(){
    $("#loaderImg").show();
    $.when(showSomeProcess()).then(function(){
        $("#loaderImg").hide();  
    })
});
var showSomeProcess=function(){
    var deferred = jQuery.Deferred()
    $("#progress").html("Process started");
    setTimeout(function(){
        $("#progress").html("Process end");
        deferred.resolve();
    },3000);
    return deferred.promise();
}

【讨论】：

【解决方案2】：

从技术上讲，setTimeout() 函数不会在流程中执行。它打破了同步序列。这并不意味着它是异步的并且在单独的线程上运行。它只是在顺序之外执行它。所以hide()函数在任务实际完成之前执行，我们看不到加载器。

它是异步的（部分），但绝对不在并发线程上运行。

因此，类似这样的代码实际上不会按预期工作：

$("#loaderImg").show();
    setTimeout(function(){
       $("#progress").html("Process end");
    },3000);
$("#loaderImg").hide();

隐藏功能将在 3 秒完成前触发。

如果您想在 3 秒后隐藏加载器，这可能会有所帮助：

$("#loaderImg").show();
   setTimeout(function(){
      $("#progress").html("Process end");
      $("#loaderImg").hide(); 
   },3000);

另外，仅仅因为setTimeout() 与序列不同步并不意味着它提高了性能，因为它在同一个线程上运行。

一个没有按预期工作的例子：

$(function() {
  $('div').html("Started");
  setTimeout(function(){
    $('div').html("Working");
  },3000);
  $('div').html("Finished");
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
</div>

您当然可以注意到上述 sn-p 中的顺序。

一些工作代码：

$(function() {
  $('div').html("Started");
  $('div').html("Working");
  setTimeout(function() {
    $('div').html("Finished");
  }, 3000);

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
</div>

【讨论】：