chrome对象console.log中的奇怪行为

Question

当我尝试在Chrome中控制一个对象的console.log时，它在console.log的第一行（你在那里看到我的posts数组长度为0的对象{small summary}）（posts：Array [0]）。

但是，当我展开帖子时，它显示它有27个项目（这是我需要的）。

这种情况随机发生在我身上，我不知道为什么会发生这种情况，以前有人经历过这种情况吗？

截图：

更新：这种情况发生在所有浏览器中，因此可能与Chrome无关

Answer 1

调试器无法知道某个对象是否已被更改，这就是为什么posts属性的呈现（在您的示例中）尚未更新的原因。 即使调试器能够知道属性何时被更改，每次更新它（并且所有“loggings”）都会太昂贵。

因此调试器只有在明确访问属性时才会检查属性。

在这种情况下，Chrome只执行一次：

p = []; window.x = {x: p}; 
Object {x: Array[0]}
x: Array[0]
__proto__: Object
x.x.push(1);
1
x.x.push(2);
2

点击x ，阵列更新

p = []; window.x = {x: p}; 
Object {x: Array[2]}
x: Array[2]
   0: 1
   1: 2
   length: 2
   __proto__: Array[0]
__proto__: Object

再向数组添加一个项目并再次切换x ，大小和条目仍然存在

x.x.push(3)
3


x: Array[2]
   0: 1
   1: 2
   length: 2
   __proto__: Array[0]

在我看来，记录器没有必要更新对象值，因为变量watch已经具有此功能。 在那里，您始终可以更新变量的当前值。

这适用于Firebug和Chrome。 以下是Chrome的一个示例：

Answer 2

“try-cache-finally”的答案也是正确的，但我想提供导致问题首先发生的答案。

当你有这个代码时：

var b = [];
function a(callback) {
   if (b.length > 0) {
       return callback();
   }

   doXhr(function() {
       b.push("something");
   })
}

当你现在调用两次然后第二次调用将看不到更新的a因为XHR请求仍在进行中，这会导致xhr请求被调用两次。

对此的解决方案是等待回调，如下所示：

a(function() {
    a(function() {
        // Correct trigger
    });
});

所以实际上是基本的异步编程，但是这个错误是因为已经存在的代码库中存在这个bug并且很难追踪。