setTimeout
- setTimeout 异步可以延时执行
setTimeout(() => {
task();
},3000)
console.log('执行console');
setTimeout是异步的，应该先执行console.log这个同步任务。
执行结果:
- //执行console
- //task()
修改前面的代码
setTimeout(() => {
task()
},3000)
sleep(10000000);
上述代码执行过程
- task()进入Event Table并注册，计时开始
- 执行sleep函数，很慢，同时计师仍在继续
- 3秒到了，计时事件timeout完成，task()进入Event Queue，但是sleep还没执行完，只好等着。
- sleep执行完，task()终于从Event Queue进入了主线程执行
由上述流程，我们知道setTimeout这个函数，是经过指定时间后，把要执行的函数加入到EventQueue,又因为单线程任务要一个一个执行，如果前面的任务执行时间需要很久，那么只能等，导致真正的延迟时间远远大于3秒
那么setTimeout(fn,0),0秒后执行又是什么意思呢？是不是可以立即执行呢？
答案是不会的，setTimeout(fn,0)的含义是，指定某个任务在主线程最早可得的空闲时间执行，意思是不用再等多少秒了，只要主线程执行栈内的同步任务全部执行完成，栈为空就马上执行。
- 关于setTimeout要补充的是，即使主线程为空，0毫秒实际上也是达不到的。最低也有4毫秒
setInterval
- setInterval是循环执行。对于执行顺序来说，setInterval会每隔指定的时间将注册的函数置入Event Queue。
- 需要注意的是，对于setInterval(fs,ms)来说，我们已经知道不是每过ms秒会执行一次fn，而是每过ms秒，会有fn进入Event Queue。一旦setInterval的回调函数fn执行时间超过了延迟时间ms，那么就完全看不出来有时间间隔了
Promise与process.nextTick(callback)
- process.nextTick(callback) 在事件循环的下一次循环中调用callback回调函数
对任务更精细的定义
- macro-task(宏任务)：包括整体代码script，setTimeout，setInterval
- micro-task(微任务): Promise process.nextTick
不同类型的任务会进入对应的Event Queue
- 时间循环的顺序，决定js代码的执行顺序。进入整体代码(宏任务)后，开始第一次循环。接着执行所有的微任务。然后再次从宏任务开始，找到其中一个任务队列执行完毕，再执行所有的微任务。
setTimeout(function() {
console.log('setTimeout');
})
new Promise(function(resolve) {
console.log('promise');
}).then(function() {
console.log('then');
})
console.log('console');
结果：
// promise console then setTimeout
由以上例子可知，
- 这段代码作为宏任务，进入主线程
- 先遇到setTimeout，将其回调函数注册后分发到宏任务Event Queue。
- 接下来遇到Promise，new Promise立即执行，then函数分发到微任务。
- 遇到console.log() 立即执行
- 整体代码script作为第一个宏任务执行结束，开始执行微任务 即then微任务。执行
- 再次从宏任务开始，发现宏任务Event Queue中setTimeout对应的回调函数，立即执行。
console.log('1');
setTimeout(function() {
console.log('2');
process.nextTick(function() {
console.log('3');
})
new Promise(function(resolve) {
console.log('4');
resolve();
}).then(function() {
console.log('5')
})
})
process.nextTick(function() {
console.log('6');
})
new Promise(function(resolve) {
console.log('7');
resolve();
}).then(function() {
console.log('8')
})
setTimeout(function() {
console.log('9');
process.nextTick(function() {
console.log('10');
})
new Promise(function(resolve) {
console.log('11');
resolve();
}).then(function() {
console.log('12')
})
})
代码分析 1/7/6/8/2/4/9/11/3/5/10/12
- 这段代码作为宏任务，进入主线程
- 执行console.log 输出1
- 遇到setTimeout 把回调函数放入宏任务中
- 遇到process.nextTick 放入微任务中
- 遇到new promise 立即执行 输出7，then函数放入微任务中
- 遇到setTimeout 把回调函数放入宏任务中
- 第一个宏任务执行结束，开始执行微任务。输出6，8
- 开始执行新一轮宏任务，输出2，nextTick放入微任务，newPromise立即执行，输出4，then放入微任务，第二轮事件循环宏任务结束我们发现有两个微任务可以执行 输出3，5
- 开始第三轮宏任务，输出9，nextTick放入微任务，newPromise立即执行，输出11，then放入微任务
分析错误，应为1/7/6/8/2/4//3/5/9/11/10/12
原因：两个setTimeout属于两个宏任务，不相同。需执行完一个setTimeout中的宏任务再执行下一个