初步了解js异步线程
开篇先简单看一个例子:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23console.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);
/*------------------------
输出结果如下:
1
2
3
4
5
6
7
8
9
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
26console.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);
/*------------------------
输出结果如下:
1
2
3
4
6
7
8
9
10
5
--------------------------*/
虽然输出‘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
32console.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);
/*------------------------
输出结果如下:
1
2
3
7
8
9
10
5
6
4
--------------------------*/
我们在代码上多加了for(var i = 0; i <1000000; i++){}
以及IIFE
,性能不好的电脑在输出了3以后会停顿若干时间,即使是这样,settimeout也不会在‘7’输出之前调用,因为他们还在排队中。而IIFE
的加入也并没有起什么作用。