jQuery展示不會在預期時執行

Question

我有一個APEX應用程序，它帶有一個調用javascript函數的按鈕。該功能正在做一些屏幕抓取並需要幾秒鐘才能完成。我想首先顯示一個微調圖標，以提供正在發生的事情。但是，即使我在調用函數之前使用jquery .show（）函數顯示了微調框，但它們似乎都在同一時間執行......點擊按鈕後的幾秒鐘。就好像jquery .show（）在函數調用完成之前不會執行。在調用函數之前，如何讓.show（）執行？我甚至嘗試將.show（）添加到函數的第一行，但結果是相同的。只有在功能完成後，微調器纔會顯示。

Answer 1

顯示接受一個回調函數作爲參數。見下面的例子。

jQuery.show() documentation

function buttonHandler() { 
    $(".spinner").show(function() { 
     // this will be executed after show has completed 
    }); 
} 

Answer 2

如何在調用函數前執行.show（）？

你叫.show，然後產生回瀏覽器的時間一點點，之前調用該函數，就像這樣：

function buttonHandler() { 
    $("...").show(); 
    setTimeout(theFunction, 0); 
} 

你必須與你的目標瀏覽器，以確定實驗是否需要大於0的值。該值以毫秒爲單位，因此高達50個左右的任何內容對於人類來說都基本上是不可感知的。

通過在返回瀏覽器之前不調用該函數，您可以讓瀏覽器更新顯示。

請注意，微調器可能不是動畫，而功能捆綁的東西，它取決於瀏覽器。您可能更願意展示靜態但動態的外觀（「加快條紋」的方式）以避免瀏覽器之間的不一致。使用50ms的

活生生的例子：

$("#the-button").on("click", buttonHandler); 
 
function buttonHandler() { 
 
    $("#spinner").show(); 
 
    $("#done").hide(); 
 
    setTimeout(theFunction, 50); 
 
} 
 
function theFunction() { 
 
    var target = Date.now() + 1000; 
 
    while (Date.now() < target) { 
 
    // Do nothing, we're just simulating a busy function 
 
    } 
 
    $("#spinner").hide(); 
 
    $("#done").show(); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="button" id="the-button" value="Click me"> 
 
<div id="spinner" style="display:none">We're doing it, one sec!</div> 
 
<div id="done" style="display:none">Function is done now</div>