In the sample, why all LI are appended after while is break, not each loop?

Question

<!DOCTYPE HTML>
<html>

<body>
  <script>
    let ul = document.createElement('ul');
    document.body.append(ul);
    while (true) {
      let data = prompt("Enter the text for the list item", "");
      if (!data) {
        break;
      }
      let li = document.createElement('li');
      li.textContent = data;
      ul.append(li);
    }
  </script>
</body>

</html>

I know prompt will block current Thread, but ul.append(li) is executed after a user respond the prompt, before the next prompt begin.

Environment: Google Chrome Version 96.0.4664.45 (Official Build) (64-bit)

Maybe my question can be answered by this post: https://stackoverflow.com/a/2734311/6717124 — Hongyuan, Nov 23 '21 at 03:05

score 2 · Answer 1 · answered Nov 23 '21 at 02:17

The browser will only be able to render the appended elements once the call stack has been emptied. You could think of it as doing:

<script>
    let ul = document.createElement('ul');
    document.body.append(ul);
    while (true) {
        let data = prompt("Enter the text for the list item", "");
        if (!data) {
            break;
        }
        let li = document.createElement('li');
        li.textContent = data;
        ul.append(li);
    }
</script>
// THEN render the elements

While you could fix it by adding a delay to the loop so that further code (and the browser) is free to use computational resources - it'd be better to avoid prompt entirely so you don't have to worry about this sort of thing (and to provide a better user experience). Use an <input> element and a button which, when pressed, takes the text from the input and creates a <li> with that text.

score 0 · Answer 2 · answered Nov 23 '21 at 02:18

It might be better to use a different structure. Have subsequent questions triggered by the user answering, so that if they don't, it stops. And that way, you can use a little setTimeout in the script to be able to see the list growing after each answer.

let ul = document.createElement('ul');
document.body.append(ul);

function getAnswer() {
  let data = prompt("Enter the text for the list item", "");
  if (!data) return
  let li = document.createElement('li');
  li.textContent = data;
  ul.append(li);
  setTimeout(() => getAnswer())
}

getAnswer()

Thank you for your answer. I know your code works, I also tried it before. But I want to know the principle behind the sample in my question. — Hongyuan, Nov 23 '21 at 02:22

score 0 · Accepted Answer · answered Nov 23 '21 at 05:51

Rendering never happens while the engine executes a task. It doesn’t matter if the task takes a long time. Changes to the DOM are painted only after the task is complete. Visit https://javascript.info/event-loop

Here is my test code:

<!DOCTYPE HTML>
<html>
<body>
<script>
    let ul = document.createElement('ul');
    document.body.append(ul);
    let count = 50;
    while (count >= 0) {
        //time consuming task
        for (let i = 0; i < 1e9; i++) {
            //pass
        }
        let data = count--;
        let li = document.createElement('li');
        li.textContent = data;
        ul.append(li);
    }
</script>
</body>
</html>

All LI will paint only after the while block ends.

In the sample, why all LI are appended after while is break, not each loop?

3 Answers3