Добавление элементов в DOM внутри функции setTimeout не работает - createDocumentFragment & appendChild - PullRequest
Новая
       37

Добавление элементов в DOM внутри функции setTimeout не работает - createDocumentFragment & appendChild

0 голосов
/ 14 мая 2019

Я пытаюсь динамически добавлять div к элементу DOM, используя чистый JavaScript. Когда я использую его без функции setTimeout, он работает должным образом, но когда я использую функцию setTimeout, фрагмент документа не добавляется (я вижу, что он существует, если я его console.log, но я явно что-то делаю не так).

Я должен использовать setTimeout, так как массив, который я собираюсь пройти, состоит из 1-5000 элементов, и я не хочу блокировать весь графический интерфейс при их рендеринге. 

<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>

Edit:

Я понял, что забыл, что setTimeout «делает его асинхронным» (что Джеймс тоже заметил, спасибо!) - неудивительно, что это не сработало. Вместо этого обернул его внутри Обещания, и вот результат: 

<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>
...