jquery在執行之前的事件之前等待for循環完成

我有一個觸發點擊事件的函數。函數內部的第一行是顯示一個覆蓋圖，之後有一個for循環。我期望函數先顯示疊加層，然後繼續使用for循環。只有在for循環完成後才顯示覆蓋圖。jquery在執行之前的事件之前等待for循環完成

$(document).on("click",function(){ 
    $("h1").text("Clicked"); 
    for(var i=0;i<100000;i++){ 
     console.log(i); 
    } 
})

來源

2016-12-29 Jerry

視圖不會在同一個線程或相同的執行流程中更新。它將使用無效技術。這意味着視圖更新會推遲一段時間，這就是我們可以用最少的努力完成更新的方式。 – subash

使用setTimeout()有疊加和for環路之間的延遲

https://jsfiddle.net/b9m5spxu/

來源

2016-12-29 11:07:31 Garfield

@jerry如果是的話更新問題 – Garfield

視圖不會在同一個線程中執行相同的流程更新。它將使用無效技術。這意味着視圖更新會推遲一段時間，這就是我們可以用最少的努力完成更新的方式。

javascript是單線程方式，所以視圖更新將等待循環完成。

來源

2016-12-29 11:12:09 subash

你有更詳細的鏈接嗎？ THKS！ –

對不起哥們，我不是一個好的鏈接屬於html。但是如果你已經看了很多使用失效的actionscript。 ActionScript也基於html/js和oops的混合開發。只是谷歌動作無效，你會得到明確的無效圖片 – subash

THK的提示;） –

這裏是一個很好的文章，解釋這種行爲（THKS @subash的提示）：http://javascript.info/tutorial/events-and-timing-depth

JavaScript執行和渲染

在大多數瀏覽器，渲染和JavaScript中使用單一事件隊列。它意味着當JavaScript運行時，不會發生渲染。

請在下面的演示中查看它。當您按運行時，瀏覽器可能暫停一段時間，因爲它將div.style.backgroundColor從

A00000更改爲#FFFFFF。

在大多數瀏覽器中，直到腳本結束，或者直到瀏覽器用一個'腳本運行得太長'的消息來暫停它，你什麼也看不到。

Opera是個例外。

<div style="width:200px;height:50px;background-color:#A00000"></div> 

<input type="button" onclick="run()" value="run()"> 

<script> function run() { var div = 
document.getElementsByTagName('div')[0] for(var 
i=0xA00000;i<0xFFFFFF;i++) { 
div.style.backgroundColor = '#'+i.toString(16) } } </script>

在Opera中，你可能會注意到格重繪。並非所有更改都會導致重繪，可能是因爲Opera內部調度。這是因爲瀏覽器中渲染和JavaScript的事件隊列不同。

在其他瀏覽器中，repaint被推遲到JavaScript 完成。

再者，實施方式可以是不同的，但一般的節點被標記爲「髒」（要被重新計算和重新繪製），並且重繪排隊。或者，瀏覽器可能會在每個腳本之後尋找髒節點並對它們進行處理。

立即迴流瀏覽器包含許多優化以加速渲染和繪畫。通常，它會嘗試延遲它們直到腳本完成，但有些操作需要立即將節點重新排列爲。

例如：elem.innerHTML =「的新內容」警報（elem.offsetHeight） // < - 重新渲染ELEM得到的offsetHeight在上述情況下，在瀏覽器必須執行relayouting得到高度。但它不不得不在屏幕上重繪elem。

有時其他依賴節點可能會涉及到計算。這個過程被稱爲重排並且如果腳本經常引起，可能會消耗大量資源。

當然，還有更多要談論渲染。它將由另一篇文章[todo]覆蓋。

來源

2016-12-29 11:36:54

jquery在執行之前的事件之前等待for循環完成

回答

A00000更改爲#FFFFFF。

相關問題