How to write a function that adds an element to the DOM and delays the next tick?

Question

I recently found the following question on the Internet:

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

Here is my answer:

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

Why did I set the interval to zero?

In accordance with this article, setting a timeout to 0 delays events until the next tick:

Executing func goes into the event queue for the closest timer. Please note that this is not immediate. No action is taken until the next tick.

Here I am not sure:

• Is my decision right?
• I can not answer why this approach is beneficial.

For reference, I received this question from this website a list of 8 questions for an interview with JavaScript .

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

Answer 1

I think you misunderstood this question. I read it as a request to add an item to the DOM, and then delay further processing until the next tick. Therefore:

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

This is useful when you want to make sure there is a reflow / repaint before some time-consuming operation occurs (to give users visual feedback). Browsers are already forcing them to rewrite in certain circumstances , but when they do not, this method can be useful.

Here you can find more information here .

---

This is my interpretation of the question, but I also find it confusing, probably because it is not clear what they mean by events. And there are other contentious issues on this site, the strangest thing:

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

It just doesn't make sense to me. Well, functions are objects in JavaScript, and areas are also related to functions, but these are different topics. The fact that functions are objects has nothing to do with scope.

So my advice is, take these salt interviews.

Answer 2

There are situations when you encounter errors that require this method to be fixed. However, this does not apply to adding an item; this is just one use case.

I came across this from time to time, performing separate types of animations, when setting several css3 properties at the same time does not lead to the correct browser redrawing.

As long as I don't have the code examples from the previous example, you can see where I use the technique on my http://popped.at site. Look at this file http://www.popped.at/js/main.js and search for "// IE9 requires a 0ms timeout". In this case, IE9 encountered a problem where the contents of the canvas were not updated properly.

(At the moment, the site does not work in the backend, so its dark. I'm working on it.)