同步函數運行時顯示一個視覺指示器

我有一個叫做compute()的函數，它執行一堆計算，然後更新由click()事件觸發的HTML表的值。這不是一個阿賈克斯調用，只有幾個for循環。同步函數運行時顯示一個視覺指示器

我想要做的是提供一個計算運行的視覺指示器。就像修改表格的不透明度一樣。我認爲，像下面這樣可以工作：

$("#mytable").css("opacity", "0.5"); 
compute(); 
$("#mytable").css("opacity", "1");

但是，當我使用此代碼似乎不透明度不進行修改。

任何提示如何做到這一點？

非常感謝提前！

來源

2012-11-23 juba

你試過'$（「＃MYTABLE」）的CSS（「不透明度」，0.5）;'？只是猜測反正... – renatoargh

你有沒有嘗試在計算結束時恢復不透明度？ – sourRaspberri

你使用什麼瀏覽器？ – Magus

這是因爲UI在不透明度的修改和compute();函數之間沒有更新。用戶界面會更新一次，而不是每行代碼之後（這會減慢一切）。

您可以使用超時來繞過：setTimeout(compute, 0);。

這樣你的用戶界面在運行前得到更新compute()。您必須將第三行放在該函數中，將不透明度修改爲1，因爲它將在compute()完成之前運行。

$("#mytable").css("opacity", "0.5"); 
setTimeout(compute, 0); 

function compute() { 
    ... 

    $("#mytable").css("opacity", "1"); 
}

它可能看起來很髒，但它確實是一種確保你的UI更新的真正方法！

來源

2012-11-23 14:58:09

啊，是的，這是有效的！事實上，我已經嘗試過這樣的事情，但我留下了括號：'setTimeout（compute（），0）;'這不起作用。非常感謝！ – juba

非常歡迎@juba。 setTimeout和setInterval方法需要一個函數。您可以設置一個內聯函數：'的setTimeout（函數（）{/ *做的東西* /}，1000）;'或使用功能名稱：'的setTimeout（函數名，1000）;'。如果添加括號，則無論函數返回什麼參數都將被設置。 –

只是爲了澄清爲什麼這不起作用，如果你讓括號：http://stackoverflow.com/questions/8058996/why-does-calling-settimeout-with-parenthesis-not-start-a-new-callstack – juba

JavaScript的所有客戶端實現都是單線程的，所以在執行下一條語句時，您無法真正期望函數調用compute繼續運行。
但是，如果您希望可以使用web worker來排序後臺線程。

閱讀您的問題第二次之後，我必須說，@tomdemuyt很可能是正確的：這很可能是compute如此之快，不透明度在拆分更換兩次第二，如此之快，你幾乎察覺不到執行改變。此外，由於這是一個事件處理程序，你可能要考慮這個問題：

function compute(e) 
{ 
    $(this).css({opacity:'.5'}); 
    //rest of your code 
    $(this).css({opacity:'1'}); 
} 
$('#mytable').on('click',compute);

這樣更整齊只是有點IMO - 這可能是因爲這並不適用於你的代碼，但以防萬一..

來源

2012-11-23 14:57:46

這很可能是因爲您的compute（）函數執行得太快以至於您無法感知不透明度更改。

嘗試在compute（）中放置一個斷點，讓我們知道不透明度是否發生了變化。

來源

2012-11-23 14:57:46 tomdemuyt

同步函數運行時顯示一個視覺指示器

回答

相關問題