Javascript 处理jQuery中.append（）调用后计时的正确方法

我有一个动态生成的表，我使用

.append（）

将其附加到页面中。我知道这应该是瞬间的，但似乎不是。是否有一种方法或更好的方法来停止代码执行，直到在屏幕上呈现该表？如果清除缓存并加载页面，则突出显示div（用透明颜色覆盖表格）的大小/位置不正确。在后续加载页面时，它工作正常。这是我的一些有用的东西，但感觉很粗糙：

$('#insert-here').append(tableInsert);

//Even though .append() is "instant," this timeout is necessary to properly size the highlight divs the very first time the page loads.
setTimeout(function() {
    $('.highlight').each(function() {
        $(this).parent().css('position', 'relative');
        $(this).height($(this).prev().find('.info-row').height());
        $(this).width($(this).prev().find('.info-row').width());
        $(this).offset($(this).prev().find('.info-row').offset());
    });
}, 125);

---

元素在

append

返回之前添加到DOM中。您看到的是，它们尚未渲染，因此其高度/宽度尚未确定

---

根据我的经验，确保它们已呈现的唯一方法是让JavaScript线程返回浏览器，这正是您所做的方式（但延迟可以短得多；我通常使用

0

）。

append（）是一个同步调用，不是吗？确保您在文档之后调用此代码。使用计时器等待加载的DOM是有史以来最糟糕的想法。我很有兴趣看到这方面的MCVE，因为尽管我在下面给出了答案，但我认为在现代浏览器中，我们不必再退让了…@NickDugger:这与“DOM加载”无关。这一切都包含在（function（）中）{//code here}）（）-老实说，我不确定这是怎么回事，当我使用.js文件时，它就是这样的。我假设它与document.ready类似。在这个例子中，任何小于125ms的都会产生相同的问题。@Brandon:哇，很有趣。正如我在评论中所说的，我很想看到一个用于此的。我不知道MVCE代表什么。给我几分钟，我会的这是一个非常大的页面的摘录。这可能是因为setTimeout之后有更多的代码在运行，而125ms允许其余的代码在返回到浏览器之前执行？@Brandon:不，这些代码仍然在运行，因为浏览器中只有一个JavaScript主UI线程。您的Java脚本代码不能自行中断（除了Firefox中关于

警报
之类的一些奇怪的怪癖之外）。如果您执行
设置超时（doSomething，0）；
然后执行
dothenexthing（）；
和
doAnotherThing（）；
等等，您可以确保
dothenexthing（）；
，
doAnotherThing（）
，等等，在运行
doSomething
之前运行。基于浏览器的代码总是在响应事件时运行（事件可能是脚本元素刚刚添加到文档中…续。。。