javascript:setAttribute为什么会在for循环前执行

Yippe_J
  • 8
let test=document.getElementById("hh");
for(let i=0;i<100;i++){
    console.log("test");
} 
test.setAttribute("style","color:red");

各位大神请问一下,这段代码为什么for循环的100个打印还没有输出,test 就被设置为红色了呢?我要怎么做才能先执行完100个输出,设置红色才生效呢?

回复
阅读 649
3 个回答

以下内容是从《你不知道的JavaScript 中卷》复制粘贴来的
第二部分 异步和性能
第 1 章 异步:现在与将来
1.1 分块的程序
异步控制台
并没有什么规范或一组需求指定 console.* 方法族如何工作——它们并不是 JavaScript 正式的一部分,而是由宿主环境(请参考本书的“类型和语法”部分)添加到 JavaScript 中的。
因此,不同的浏览器和 JavaScript 环境可以按照自己的意愿来实现,有时候这会引起混淆。
尤其要提出的是,在某些条件下,某些浏览器的 console.log(..) 并不会把传入的内容立即输出。出现这种情况的主要原因是,在许多程序(不只是 JavaScript)中,I/O 是非常低速的阻塞部分。所以,(从页面 /UI 的角度来说)浏览器在后台异步处理控制台 I/O 能够提高性能,这时用户甚至可能根本意识不到其发生。
下面这种情景不是很常见,但也可能发生,从中(不是从代码本身而是从外部)可以观察到这种情况:

var a = {
index: 1
};
// 然后
console.log( a ); // ??
// 再然后
a.index++;

我们通常认为恰好在执行到 console.log(..) 语句的时候会看到 a 对象的快照,打印出类似于 { index: 1 } 这样的内容,然后在下一条语句 a.index++ 执行时将其修改,这句的执行会严格在 a 的输出之后。
多数情况下,前述代码在开发者工具的控制台中输出的对象表示与期望是一致的。但是,这段代码运行的时候,浏览器可能会认为需要把控制台 I/O 延迟到后台,在这种情况下,等到浏览器控制台输出对象内容时,a.index++ 可能已经执行,因此会显示 { index: 2 } 。
到底什么时候控制台 I/O 会延迟,甚至是否能够被观察到,这都是游移不定的。如果在调试的过程中遇到对象在console.log(..) 语句之后被修改,可你却看到了意料之外的结果,要意识到这可能是这种 I/O 的异步化造成的。

如果遇到这种少见的情况,最好的选择是在 JavaScript 调试器中使用断点,而不要依赖控制台输出。次优的方案是把对象序列化到一个字符串中,以强制执
行一次“快照”,比如通过 JSON.stringify(..) 。

我用以下代码在当前页面控制台测试,你的问题标题变成红色的1000,但是log我这边才到30多,由此可知,for循环已经执行完成,只是console.log执行比较慢而已

let test = document.querySelector("#question-wrap h1 a");

for (var i = 0; i < 1000; i++) {
    console.log(i);
}
test.innerText = i

test.setAttribute("style", "color:red!important");

暂时未找到解决方法

无需太过理会console.log的打印结果,其结果仅供参考。各大浏览器厂商为了提高浏览器性能,几乎都做了I/O流的异步处理,console.log的结果输出到控制台时,有时会表现成异步。这是正常的现象。
你可以换成其他的同步代码逻辑,比如在for循环中将某一个text node的值设置为i,相当于一个计数器,等循环结束后,再设置样式 test.setAttribute("style","color:red");

你知道吗?

宣传栏