為什么我對dom的更改直到函數運行后才會顯示

Question

我的eval()調用相當密集，需要大約一秒鍾來生成每個解決方案。

因此，生成每個段落元素需要大約一秒鍾（然后我將其附加到dom - document.getElementById('project_euler_solutions').appendChild(p); ）。

因此，我希望每個段落在網頁上顯示大約一秒鍾。 （所以大約40秒后我會有40段說）。

但是，當我單擊按鈕時，40秒內沒有任何操作，然后所有解決方案立即出現。

為什么在更新dom之前等待所有人完成？

我認為每個段落一旦附加到dom就會出現

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.6.2.min.js"></script>
    <script src="/statics/project_euler.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("button").click(function(){
                for (var i in window) {
                    if (i.slice(0,5) == "solve") {
                        var p = document.createElement('p');
                        p.innerHTML = "running: " + i;
                        document.getElementById('project_euler_solutions').appendChild(p);
                        var p = document.createElement('p');
                        p.innerHTML = "Solution: " + eval(i + "()");
                        document.getElementById('project_euler_solutions').appendChild(p);
                    }
                }
            });
        });
    </script>
</head>

<body>
<div id="project_euler_solutions"><button>Calculate solutions</button></button></div>
</body>
</html>

Answer 1

Javascript在與UI相同的線程中運行，因此您需要為DOM提供控制權以重新繪制所有更改。

Answer 2

強制回流：

    $(document).ready(function(){
        $("button").click(function(){
            for (var i in window) {
                if (i.slice(0,5) == "solve") {
                    var p = document.createElement('p');
                    p.innerHTML = "running: " + i;
                    document.getElementById('project_euler_solutions').appendChild(p);
                    var p = document.createElement('p');
                    p.innerHTML = "Solution: " + eval(i + "()");
                    document.getElementById('project_euler_solutions').appendChild(p);
                    document.getElementById('project_euler_solutions').offsetHeight; //Force a reflow
                }
            }
        });
    });

您還可以在圖紙之間設置SetTime：

    var keys = Object.keys(window).filter(function(i){
        return i.slice(0,5) === "solve";
    });

    (function (i){
        (function k(){
            var p = document.createElement('p');
            p.innerHTML = "running: " + keys[i];
            document.getElementById('project_euler_solutions').appendChild(p);
            var p = document.createElement('p');
            p.innerHTML = "Solution: " + eval(keys[i] + "()");
            document.getElementById('project_euler_solutions').appendChild(p);
            if( i++ < keys.length - 1 ) {
                setTimeout(k, 0);
            }            
        })()
    })(0)

為什么我對dom的更改直到函數運行后才會顯示

問題描述

2 個解決方案

解決方案1
5 已采納 2012-06-06 04:02:05

解決方案2
1 2012-06-06 04:05:00

為什么我對dom的更改直到函數運行后才會顯示

問題描述

2 個解決方案

解決方案1 5 已采納 2012-06-06 04:02:05

解決方案2 1 2012-06-06 04:05:00

解決方案1
5 已采納 2012-06-06 04:02:05

解決方案2
1 2012-06-06 04:05:00