Question

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

请在此处查看示例。当用户点击按钮时，将启动该过程。这里我把setTimeout函数设置为延迟。但是没有显示处理图像。

如果我将用于隐藏图像的代码放在setTimeout函数中，那么它正在工作。

但在实际代码中也无效。

我也试过

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

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

Answer 1

使用承诺将解决您的问题。更新了小提琴[{3}}

ul li a {
  line-height: 1em;
}

Answer 2

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

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

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

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

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

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

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

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

一个不能按预期工作的例子：

＆＃13;

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

＆＃13;

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

＆＃13;

当然，您可以注意到上述代码段中的序列如何。

一些有效的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

为什么装载机图像没有显示？

2 个答案: