Javascript 如何编写一个函数，将一个项附加到DOM中并延迟下一个滴答声？

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

编写一个函数，获取一个对象并将其附加到DOM中，从而使事件缓冲到下一个刻度？解释为什么这是有用的

以下是我的回应：

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

为什么我把间隔设置为零

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

func的执行在最近的计时器刻度上进入事件队列。注意，这并不是立即的。在下一次勾选之前，不会执行任何操作

我不确定的是：

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

作为参考，我从这个网站上得到了这个问题

---

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

有些情况下，您会遇到需要使用此技术修复的bug。但它并不特定于附加一个元素；这只是一个用例

我在制作特定类型的动画时经常遇到这种情况，同时设置多个css3属性不会触发浏览器正确重画

虽然我没有上一个案例的代码示例，但您可以在我的站点上看到我在哪里使用该技术。查看此文件，并搜索“//IE9需要0毫秒超时”。在这种情况下，IE9中有一个问题，画布没有正确更新

---

（该网站的后端目前无法正常运行，这就是它黑暗的原因。我正在努力。）

我想你误解了这个问题。我把它理解为要求向DOM附加一个元素，然后将任何进一步的处理延迟到下一个刻度。因此：

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

当您希望确保在进行一些耗时的操作之前（为用户提供视觉反馈）进行回流/重新喷漆时，这非常有用。浏览器已经强制重新绘制，但如果不强制重新绘制，这种技术可能会很有用

你可以找到更多的信息和信息

---

这是我对这个问题的解释，但我也感到困惑，可能是因为不清楚他们所说的事件是什么意思。在该网站上还有其他有争议的问题，最奇怪的是：

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

这对我来说毫无意义。好的，函数是JavaScript中的对象，作用域也与函数相关，但它们是不同的主题。函数是对象这一事实与作用域无关

---

因此，我的建议是，对面试中的问题保持冷静。

这将允许您看到每个项目都被添加，一次添加一个项目（当然很快）。如果你只是把它放在一个循环中，浏览器会等到它完成后再重新绘制屏幕。这是一个同步性的例子。为了澄清一下，你说的是在循环内部调用的函数，是吗？而且，这样的方法会导致多次重绘，对吗？对不起，我不知道为什么我认为这段代码是在循环中调用的。我刚才又读了一遍。我想我的观点是，如果你的函数在一个循环中被调用（比如从0到9），你会/可能看到每个元素都被追加，因为它们是异步的，所以有一个重绘。如果您没有使用

setTimeout

，只是在同一

for

循环中调用了

.appendChild

，您会看到它们同时出现，因为代码是同步的，并且最后只会有一个重绘。我不确定这一切是否还相关：）关于这一点，我想我可以说的一件事是，这取决于您是否有希望元素位于DOM中的代码。例如，如果您这样做：

var div=document.createElement（“div”）；附加元素（div）

然后期望

div

在DOM中，代码可能无法正常工作，因为它还不在DOM中