Question

以下是代码：

var img = document.createElement('img');
//debugger;
console.log(img);
[1, 2].forEach(function (item) {

    console.log(img);

    img.removeAttribute("src")

    console.log(img);

    var img_src = document.createAttribute("src");
    img_src.value = '/test?id=' + item;
    img.setAttributeNode(img_src);

    console.log(img);
});

首先我在Chrome上运行它并获得结果：

<img src="/test?id=2">
<img src="/test?id=2">
<img src="/test?id=2">
<img src="/test?id=2">
<img src="/test?id=2">
<img src="/test?id=2">
<img src="/test?id=2">

但是当我在调试器中使用step into或在Firefox上运行它时，结果与我想的相同：

<img>
<img>
<img>
<img src="/test?id=1">
<img src="/test?id=1">
<img>
<img src="/test?id=2">

也许更好的方法是将语句放在forEach函数中。

这是Chrome开发者工具中的错误吗？

Answer 1

我认为console.log在Firefox上表现为异步。它不是标准化的，因此行为可能会根据版本或浏览器而改变，它有一些异步问题可能与跨进程边界封送数据有关。

如果console.log是一个简单的对象，然后立即更改对象中的某些内容，则console.log（）并不总是显示该值。

尝试将img放入一个不可变的字符串中，然后将其打印出来。

Answer 2

刚刚发现了一件有趣的事情。如果您在Firefox中使用已关闭的控制台刷新（cmd + r）页面，您将获得与Chrome中相同的结果。刷新后只需打开控制台;）

所以它看起来像是一个Firefox bug

JavaScript forEach（）方法在Chrome和Firefox中的工作方式不同

2 个答案: