0

我有一堆javascript函数，在按钮点击时触发。所以假设我们有两个 button 触发了两种方法，例如：

 var universal = false;
    var collection = Array(); // assume it has 5 data elements( 0...4) upon page load

    function next()
    {
      if(universal)
         addToArray();

       // do whatever else
    }

    function addToArray()
    {

        console.log(collection);
       // perform some DOM calls,that simply Hide/change position of elements
       var newElement = 'some info';   
       collection.push(newElement);
    }

在上面的 addToArray() 函数中，当单击“下一步”按钮并将通用变量设置为 true 时调用它。此时我们进入，addToArray() 方法和一个console.log 被调用来检查'collection'。

这在任何给定点上都不应超过 5 个元素，因为 addToArray 最终会将一个元素添加到集合中，但不会在一开始就添加。但是，console.log 显示该集合添加了新元素，该元素实际上应该在 addToArray 方法（）期间添加，而不是立即添加。

我知道这听起来很愚蠢，但这就是我得到的。我试图了解异步行为是否与它有关。

4

2 回答 2

2

如果您使用的是 Chrome，原因是该对象console.log的实时版本会在您稍后更改时在控制台窗口中更新。

如果你改变

console.log(collection);

...至

console.log(collection.join(","));

...或者可能更有用

console.log(JSON.stringify(collection));

...您将看到数组的时间点版本。

的行为console.log实际上是相当棘手的，尽管一旦你明白了它的一致性。例如，考虑以下代码：

var a = [1, 2, 3];

console.log("first");
console.log(a);
console.log("second");
a[0] = '11';
a = ['a', 'b', 'c'];
console.log("third");

实时复制| 资源

如果您在运行时打开了控制台，您会看到：

第一个
[1, 2, 3]
第二
第三

...并且没有多少点击[1, 2, 3]会显示"11"放在 index 的代码0，更不用说我们放入的新数组了a。

但是如果你改变

var a = [1, 2, 3];

...至

var a = [[1, 1], 2, 3];

实时复制| 资源

...你看到这个：

第一个
>[数组[2], 2, 3]
第二
第三

...并单击数组旁边的箭头将其更改为：

第一个
v[数组[2], 2, 3]
    0：“11”
    1:2
    2：3
    长度：3
    __proto__: 数组[0]
第二
第三

...这看起来有点荒谬。

但这确实是有道理的，你必须从控制台的角度来考虑你要求它输出的东西。它为事物输出一条线，这条线是静态的。但是因为它看到对象图更深了，所以 Chrome 在数组旁边放了一个箭头，这样你就可以扩展它。当您单击该数组时，然后通过查看对象的当前版本，生成添加到输出的新行，该版本自输出第一行以来明显发生了变化。棘手，是吗？

在评论中，epascarello 提到了 using console.dir，但这只是让它更可靠地“活”，而不是成为一个时间点记录。

于 2012-12-17T22:42:17.950 回答
0

您的问题可能console.log是异步的。尝试将其注释掉或在该行中放置超时/断点。

于 2012-12-17T22:44:51.120 回答