Javascript jQuery after（）似乎具有竞争条件

我有一个非常奇怪的bug，似乎是竞争条件导致了

width（）调用将给出不同的结果

我接到这个电话：

在70%的情况下，这完全符合预期，但有时我对某些元素的度量值是错误的，或者至少可以肯定第一个度量值有时是错误的

奇怪的是，对象似乎是正确的，它的属性是正确的宽度，但指定给
w
的给定
widt（）
不正确：


该图像显示了日志记录的结果
w
和
$（this）
，它们应该是相同的，因为
$（this）
的width属性似乎是正确的

我一直在调试，发现了两件事，让他相信这是竞争条件：

如果我再次执行我发布给您的最后一段代码，当错误重现时，它会修复问题

如果我执行以下调用，则会得到不同的结果，一个不正确，另一个（第二个）正确：

我的印象是，在第一部分完成之前，代码的第二部分不会执行，这里给出了什么

注意：我不是100%确定我要找的词是种族状况，但我的想法是


更新：

由于@WereWolf TheAlpha控制台的输出看起来不像jquery对象，我现在无法复制它，我只得到以下结果：


不更改任何代码。
这里的问题是，当对象在检查器中折叠时，Chrome检查器将提供对对象的引用。单击该箭头展开对象时，其属性将变为真实。您可以运行此命令以查看它的发生：

var obj = {};
for (i=0; i<100; i++)
  obj['foo'+i] = i;
console.log(obj);
for (i=0; i<100; i++)
  obj['foo'+i] = 'gotcha';
console.log(obj);

var obj={}；
因为（i=0；iIt（
this.after
）看起来不像
jQuery
对象。@狼人这是我没有注意到的一个优点，我将检查那里发生了什么。不，不，输出看起来像jQuery对象，在概念上是DOM元素集。jQuery选择集中的每个元素都不是jQuery对象（例如，在位置0处）但是一个DOM元素。我猜浏览器还没有更新宽度，只是为了实验，试着把它放在一个setTimeout中，
.width
需要在附加之后才能得到正确的值。@BenjaminGruenbaum with timeout它似乎工作正常。它只是部分正确。在对象展开时，它不是一个完整的引用d属性的值被检索。如果对象在此之后再次更改，则这些属性不会更新。因此，所有未展开的属性都只是引用，但在展开时会被冻结，这将导致一些奇怪的效果。@Joe感谢您的回答，但我真的不明白这对我有什么帮助：）@Trufa it partial解释了您看到的内容。
282
显示了在脚本执行时计算的值。
73
另一方面是对象在
控制台中展开对象时所具有的
offsetWidth
，这可能是在布局引擎执行重新启动后添加的元素。@t.niese好的，只是想确定，这是唯一的一点，是的，问题似乎是在执行时元素仍然不在那里。@Trufa在调用
elm.after（…）后，对象立即在那里
，但可能是当时没有进行重新发布，这可能有不同的原因（例如，如果您使用的web字体当时没有完全加载，样式表没有完全加载，或者其他可能导致布局引擎推迟其任务的事情）除了一篇旧的过时的帖子，我现在没有证明我的主张的最新链接。
var w = 0;
$(".menuItemColumn").each(function(){
    w += $(this).width();
    console.log($(this));
    console.log(w);
});
$(".menuItemList").css({
    width: w}
);

console.log($(".menuItemColumn:first").width());
setTimeout(function(){console.log($(".menuItemColumn:first").width());},3000);

var obj = {};
for (i=0; i<100; i++)
  obj['foo'+i] = i;
console.log(obj);
for (i=0; i<100; i++)
  obj['foo'+i] = 'gotcha';
console.log(obj);