當函數被調用時顯示加載圖像

Question

我試圖在javascript函數運行時顯示加載圖像。它處理很多數字，在較慢的PC上運行需要幾秒鐘的時間。

我想這會工作

function myFunction(){; 
    $('#loading').show(); 
    // The bit that takes ages to run 
    $('#loading').hide(); 
} 

但是它並沒有縫取消隱藏#loading股利。

有沒有更好的方法來做到這一點？

Answer 1

不幸的不是。由於JavaScript是單線程的，因此它不會更新加載映像的可見性，直到它完成爲止，此時您已經告訴它再次隱藏。

此外，即使它工作，一個動畫GIF不會出於同樣的原因，它會出現凍結。

這裏的最佳解決方案是使用Web Workers，但是這些都是相當先進的，只能在最新的瀏覽器中工作。

下一個最好的事情將是沿着這些線路做一些事情：

function myFunction() { 
    $("#loading").show(); 
    setTimeout(function() { 
     // long code here 
     $("#loading").hide(); 
    },1); // give it a moment to redraw 
}