Question

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

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

以下是我的回复：

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

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

根据this article，将超时设置为0，将事件延迟到下一个滴答：

func的执行转到最近的计时器tick上的Event队列。请注意，这不是立即的。在下一次打勾之前不会执行任何操作。

这是我不确定的：

我的解决方案是否正确？
我无法回答为什么这种方法是有益的

作为参考，我从这个网站listing 8 JavaScript interview questions得到了这个问题。

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

Answer 1

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

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

当你想要确保在进行一些耗时的操作之前有一个reflow / repaint （给用户提供视觉反馈）时，这很有用。浏览器已经在certain circumstances中强制重新绘制，但是当它们没有时，这种技术会很有用。

您可以找到更多信息here和here。

这是我对这个问题的解释，但我发现它也很混乱，可能是因为它不清楚事件的意思。该网站还有其他值得商榷的问题，最奇怪的是：

“作为对象的函数”的概念是什么？这对变量范围有何影响？

这对我来说毫无意义。好的，函数是JavaScript中的对象，范围也与函数有关，但这些是不同的主题。函数是对象的事实与范围无关。

所以我的建议是，把那些面试问题放在一边。

Answer 2

在某些情况下，您遇到需要此技术修复的错误。它不是特定于附加元素;这只是一个用例。

我不时遇到过这种动画，其中同时设置多个css3属性不会触发浏览器正确重绘。

虽然我没有上一个案例的代码示例，但您可以在我的网站http://popped.at上查看我在哪里使用该技术。查看此文件http://www.popped.at/js/main.js，然后搜索“// IE9需要0ms超时”。在这种情况下，IE9中存在一个问题，即canvas没有正确更新。

（此时此网站在后端无法正常运行，这就是它黑暗的原因。我正在研究它。）

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

2 个答案: