如何编写一个将项附加到DOM并延迟下一个Tick的函数？

Question

我最近在网上发现了以下问题:

编写一个函数,该函数接受一个对象并将其附加到DOM,使得事件被缓冲直到下一个滴答？解释为什么这有用？

以下是我的回复:

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

为什么我将间隔设置为零？

根据这篇文章,将超时设置为0,将事件延迟到下一个tick:

func的执行转到最近的计时器tick上的Event队列.请注意,这不是立即的.在下一个滴答之前不会执行任何操作.

这是我不确定的:

作为参考,我在这个网站上收到了8个JavaScript面试问题.

我还想指出,我正在为自己的研究和改进提出这个问题,而不是作为代码挑战,面试问题或家庭作业的一部分.

Answer 1

我想你误解了这个问题.我把它读作要求将一个元素附加到DOM,然后延迟任何进一步处理直到下一个滴答.因此:

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

当您想要在进行一些耗时的操作之前确保存在重排/重新绘制(为用户提供视觉反馈)时,这非常有用.浏览器在某些情况下已经强制重新绘制,但是当它们不重绘时,这种技术可能很有用.

您可以在此处和此处找到更多信息.

这是我对这个问题的解释,但我觉得它也很混乱,可能是因为它们不清楚它们对事件的意义.该网站还有其他值得商榷的问题,最奇怪的是:

"作为对象的函数"的概念是什么？它如何影响变量范围？

这对我来说根本没有意义.好的,函数是JavaScript中的对象,范围也与函数有关,但这些是不同的主题.函数是对象的事实与范围无关.

所以我的建议是,带着那些面试问题.