【随笔】面试-JS机制

设计概念： 如何理解JS的单线程；什么是任务队列；什么是Event Loop。

案例一

1
2
3
4
5
6
7

console.log(1)
setTimeout(function() {
	console.log(2)
},0)
console.log(3)

// 输出 1  3  2

结论：setTimeout是异步任务，console.log是同步任务。单线程在一同一时间只能做一件事，JS，任务队列是有执行顺序的，是从上往下依次执行，所以先输出1，setTimeout是异步任务要挂起，往下输出3，执行完同步再执行异步（队列），输出2。

案例二

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

console.log('A')
while (true) { 
	
}
console.log('B')

// 只输出 A  
// while (true) {}  同步： 页面一直刷新


console.log('A')
setTimeout(function() {
    console.log('B')
},0)
while (true) {
	
}

// 只输出 A

案例三

1
2
3
4
5
6
7

for(var i=0; i<4; i++) {
	setTimeout(function() {
		console.log(i)
	}, 1000)
}

// 4 4 4 4

结论：setTimeout是异步执行的，1000ms后向任务队列里添加一个任务，只有主线上的全部执行完才会执行任务队列里的任务，所以当主线程for循环执行完之后 i 的值为5，这个时候再去任务队列中执行任务，i全部为5；每次for循环的时候setTimeout都会执行，但是里面的function则不会执行被放入任务队列，因此放了5次；for循环的,1000ms后全部执行任务队列中的函数，所以就是输出五个5。

修改：

1
2
3
4
5
6
7
8
9
10
11
12
13

for (var i = 0; i < 4; i++) {
	(function (i) {
		setTimeout(function () {
				console.log(i)
		}, 1000);
	})(i);
}

for(let i=0; i<4; i++) {
	setTimeout(function() {
		console.log(i)
	}, 1000)
}

异步任务

• setTimout和setInterval
• DOM事件
• ES6中的Promise

• Previous Post →
• ← Next Post

赏 支付宝打赏 微信打赏

欣赏此文，打赏一下