在阻止代碼之前和之後做一些事情

原諒我的壞名字，但現在，我甚至不知道我不知道什麼。在阻止代碼之前和之後做一些事情

如果我有一個HTML頁面，看起來是這樣的：

<html> 
    <head> 
     <script> 
      jQuery(document).ready(function(){ 
       jQuery("#modalDiv").show(); 
       //This part takes up to a few seconds to execute and blocks the browser 
       for(var i = 0; i < 10000; i++){ 
        console.log("doing something"); 
       } 
       jQuery("#modalDiv").hide(); 
      }); 
     </script> 
     <style> 
      #modalDiv{ 
       background-color:red; 
       height:100px; 
       width:100px; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="modalDiv"></div> 
    </body> 
</html>

ID爲「modalDiv」元素是永遠不會顯示在頁面上。我沒有試圖解決這個「問題」，我只是想了解引擎蓋下發生了什麼，導致我的腳本像它一樣行事。

來源

2013-07-10 user2569432

你在你的DOM稱爲#modalDiv一個div？ – Gallen

使用Firebug檢查DOM。 –

你的控制檯告訴你什麼？ –

在所有同步操作完成之前，瀏覽器不會呈現對DOM的更改，並且您的代碼會將控制權返回給主事件循環。這樣可以讓用戶在不看到所有中間表單的情況下對頁面進行大量更改 - 等待完成並顯示最終結果。

強制立即更新的一種方法是使用動畫。

$(function() { 
    jQuery("#modalDiv").show(5000); 
    //This part takes up to a few seconds to execute and blocks the browser 
    for (var i = 0; i < 10000; i++) { 
     console.log("doing something"); 
    } 
    jQuery("#modalDiv").hide(5000); 
});

DEMO

來源

2013-07-10 17:04:09 Barmar

您是否等待DOM加載？

嘗試：

$(document).ready([your_function_here]);

如果文檔對象模型（DOM）是還沒有裝，你將無法對其執行操作。

來源

2013-07-10 16:57:35 zigo

抱歉太含糊。我更新了我的問題。 – user2569432

使用setTimeout(func, 0)異步運行代碼（0表示運行功能直接），所以它不會阻止瀏覽器

jQuery("#modalDiv").show(); 

setTimeout(function() { 
    //This part takes up to a few seconds to execute and blocks the browser 
    for(var i = 0; i < 10000; i++){ 
     console.log("doing something"); 
    } 
    jQuery("#modalDiv").hide(); 
}, 0);

來源

2013-07-10 17:00:54 Populus

一些瀏覽器等待，直到他們更新屏幕前的JavaScript執行完畢的線程對DOM進行了更改。如果在javascript中對DOM做了多處更改，那麼這是更高效的做事方式，因爲它僅放置一次，只在屏幕上顯示一次。這種行爲的細節可能因瀏覽器而異，因爲它是性能優化，並且一旦JS執行完畢，它們都會以相同的最終結果結束。

有一些技巧強制瀏覽器通過請求需要佈局爲最新的DOM屬性來更新屏幕。您可以閱讀關於如何觸發迴流/重繪的文章：http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/和另一篇相關文章：http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html。

例如，你應該能夠迫使這個迴流（添加調用.offset()）：

jQuery("#modalDiv").show().offset(); 
//This part takes up to a few seconds to execute and blocks the browser 
for(var i = 0; i < 10000; i++){ 
    console.log("doing something"); 
} 
jQuery("#modalDiv").hide();

其他的事情可以做，讓畫面更新運行的一部分你的代碼在setTimeout()，因爲這可以讓你的JavaScript的第一部分實際上完成執行（並因此屏幕將被更新）。這實際上並沒有像你的代碼示例那樣同步運行所有的東西，但有時候是一個好的解決方法。

來源

2013-07-10 17:03:49 jfriend00

非常有幫助，謝謝。 – user2569432

在阻止代碼之前和之後做一些事情

回答

相關問題