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

Question

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

请看一下示例 here.when 用户单击按钮的过程将开始。这里我设置了 setTimeout 函数来使 delay.But 处理图像不显示。

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

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

我也试过

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

所以请帮我看看这个示例代码。不明白为什么处理后的图片不显示

Answer 1

使用 promise 将解决您的问题。更新 fiddle 也 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();
}

Answer 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>

您肯定会注意到上面片段中的顺序。

一些工作代码：

$(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>

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

why loader image is not showing?

jquery

.when