6

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

编写一个函数来获取一个对象并将其附加到 DOM 中，以便缓冲事件直到下一个滴答声？解释为什么这很有用？

这是我的回应：

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

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

根据这篇文章，将超时设置为 0，将事件延迟到下一个刻度：

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

这是我不确定的：

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

作为参考，我从这个列出 8 个 JavaScript 面试问题的网站上得到了这个问题。

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

4

2 回答 2

6

我想你误解了这个问题。我把它读作要求将一个元素附加到 DOM，然后将任何进一步的处理延迟到下一个滴答声。所以：

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

当您想确保在一些耗时的操作发生之前进行重排/重绘（为用户提供视觉反馈）时，这很有用。浏览器在某些情况下已经强制重绘，但如果不强制重绘，这种技术会很有用。

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

这是我对这个问题的解释，但我也觉得它令人困惑，可能是因为不清楚events的含义。该网站上还有其他有争议的问题，最奇怪的是：

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

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

所以我的建议是，对这些面试问题持保留态度。

于 2013-05-15T03:10:49.977 回答
0

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

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

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

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

于 2013-05-15T03:05:52.707 回答