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中的宏任务再执行下一个