0

我正在尝试使用纯 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>
4

0 回答 0