爲什麼裝載機圖像不顯示？

Question

我有一個功能，需要一些時間來完成它的過程。因此，我打算在過程映像完成之前顯示過程映像。

請看這裏的示例。當用戶點擊按鈕時，進程將開始。在這裏，我把setTimeout函數作出延遲，但處理圖像沒有顯示。

Sample Code

如果我把代碼隱藏setTimeout函數內的圖像是工作。

但在實際的代碼也是不起作用。

而且我

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

試圖所以，請幫助我這個示例代碼。我不明白爲什麼處理圖像沒有顯示。

Answer 1

諾言的使用將解決您的問題。更新小提琴也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()函數在任務實際完成之前執行，並且我們沒有看到加載程序。

它是異步的（部分），但絕對不在併發線程上運行。

所以，像這樣的代碼實際上不會如預期：完成3秒前

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

的隱藏功能將被觸發。

這可能會幫助，如果你想隱藏3secs後裝載機：

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