初步了解js异步线程
开篇先简单看一个例子:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
| console.log(1); console.log(2); console.log(3); console.log(4); console.log(5); console.log(6); console.log(7); console.log(8); console.log(9); console.log(10);
|
原因就是js是单线程的,执行队列先进先出。
那么,如果在中间插入一句settimeout呢?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
| console.log(1); console.log(2); console.log(3); console.log(4); setTimeout(() => { console.log(5); },0); console.log(6); console.log(7); console.log(8); console.log(9); console.log(10);
|
虽然输出‘5’的等待时间设为0,但是它还是最后输出的。原因是settimeout属于js的异步线程,要等主线程执行完毕后才会执行。
而settimeout的代码会根据设置的时间输出。表现如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
| console.log(1); console.log(2); console.log(3); for(var i = 0; i <1000000; i++){} setTimeout(() => { console.log(4); },20); (function(n){setTimeout(() => { console.log(n); },0);})(5); setTimeout(() => { console.log(6); },0); console.log(7); console.log(8); console.log(9); console.log(10);
|
我们在代码上多加了for(var i = 0; i <1000000; i++){}
以及IIFE
,性能不好的电脑在输出了3以后会停顿若干时间,即使是这样,settimeout也不会在‘7’输出之前调用,因为他们还在排队中。而IIFE
的加入也并没有起什么作用。