How to Write A Function That Appends an Item to the DOM and Delays the Next Tick?

Question

I recently found the following question online:

Write a function that takes an object and appends it to the DOM, making it so that events are buffered until the next tick? Explain why this is useful?

Here is my response:

function appendElement(element) {
    setTimeout(function() {
        document.body.appendChild(element);
    }, 0);
}

Why did I set the interval to zero?

According to this article, setting the timeout to 0, delays the events until the next tick:

The execution of func goes to the Event queue on the nearest timer tick. Note, that’s not immediately. No actions are performed until the next tick.

Here's what I am uncertain of:

• Is my solution correct?
• I cannot answer why this approach is beneficial

For reference, I got this question from this website listing 8 JavaScript interview questions.

I'd also like to point out that I am asking this question for my own research and improvement and not as part of a code challenge, interview question, or homework assignment.

Answer 1

I think you misunderstood the question. I read it as asking to append an element to the DOM, then delay any further processing until the next tick. Therefore:

document.appendChild(element);
setTimeout(function() {
    resumeProgramFlowFromHere();
}, 0);
// nothing here

That's useful when you want to make sure there is a reflow/repaint before some time-consuming operation takes place (to give users visual feedback). Browsers already force a repaint in certain circumstances, but when they don't, this technique can be useful.

You can find some more information here and here.

---

That's my interpretation of the question, but I find it confusing too, probably because it's not clear what they mean by events. And there are other debatable questions on that site, the weirdest being:

What is the concept of “functions as objects” and how does this affect variable scope?

That simply makes no sense to me. Okay, functions are objects in JavaScript, and scopes are also related to functions, but those are distinct topics. The fact that functions are objects has nothing to do with scope.

So my advice is, take those interview questions with a grain of salt.