Question

我想使用纯JavaScript将div动态附加到DOM元素。当我不使用setTimeout函数使用它时，它可以正常工作，但是当我使用setTimeout函数时，该文档片段未附加（如果我用console.log可以看到它存在，但显然我做错了）。

我必须使用setTimeout，因为我要循环通过的数组包含1-5000个项目，并且在渲染这些项目时我不想锁定整个gui。

<html>
    <body>
        <head>
        </head>
        <div id="outputContainerFlowchart"></div>
        <script>
            console.log(document.getElementById("outputContainerFlowchart"));
            let dummyArr = ["D", "u", "M"];
            let cont = document.getElementById("outputContainerFlowchart");
            let frag = document.createDocumentFragment();
            for (const letter of Object.values(dummyArr)) {
                setTimeout(function() {
                        var printedNodeTest = document.createElement("div");
                        printedNodeTest.className = "printedNode";
                        printedNodeTest.innerHTML = "Testnode";
                        frag.appendChild(printedNodeTest);
                }, 0);
            }
            cont.appendChild(frag);
        </script>
    </body>
</html>

编辑：

我意识到我忘记了setTimeout“使它异步”（James也注意到了，谢谢！）-难怪它没有用。而是将其包装在Promise中，结果是：

<html>
    <body>
        <head>
        </head>
        <div id="outputContainerFlowchart"></div>
        <script>
            console.log("initializing");
            console.log(document.getElementById("outputContainerFlowchart"));
            let dummyArr = ["D", "u", "M"];
            let cont = document.getElementById("outputContainerFlowchart");
            let renderFunc = function(dummyArr) {
                return new Promise(function(resolve, reject) {
                    let frag = document.createDocumentFragment();
                    for (const letter of Object.values(dummyArr)) {
                        console.log("current letter inside for: "+letter);
                            console.log("inside timeout");
                            var printedNodeTest = document.createElement("div");
                            printedNodeTest.className = "printedNode";
                            printedNodeTest.innerHTML = "Testnode";
                            frag.appendChild(printedNodeTest);
                    }
                    resolve(frag);
                });
            }
            renderFunc(dummyArr).then(function(frag) {
                console.log("appending frag");
                cont.appendChild(frag);
            });        
        </script>
    </body>
</html>

在setTimeout函数内将元素追加到DOM无效-createDocumentFragment＆appendChild

0 个答案: