+ 
+ 
+ 
+ 
+ 
diff --git a/src/components/TheWelcome.vue b/src/components/TheWelcome.vue
index 684afc3c35dce3786264223630b29b065fd1fe27..023574c43f178bbd7c90100825008c94067dccd0 100644
--- a/src/components/TheWelcome.vue
+++ b/src/components/TheWelcome.vue
@@ -19,6 +19,66 @@ const test1 = () => {
log1.value.push('代码执行结束')
}
+
+let log2 = ref([]);
+const test2 = () => {
+ log2.value = []
+ log2.value.push('1');
+setTimeout(function() {
+ log2.value.push('2');
+ process.nextTick(function() {
+ log2.value.push('3');
+ })
+ new Promise(function(resolve) {
+ log2.value.push('4');
+ resolve();
+ }).then(function() {
+ log2.value.push('5')
+ })
+})
+process.nextTick(function() {
+ log2.value.push('6');
+})
+new Promise(function(resolve) {
+ log2.value.push('7');
+ resolve();
+}).then(function() {
+ log2.value.push('8')
+})
+
+setTimeout(function() {
+ log2.value.push('9');
+ process.nextTick(function() {
+ log2.value.push('10');
+ })
+ new Promise(function(resolve) {
+ log2.value.push('11');
+ resolve();
+ }).then(function() {
+ log2.value.push('12')
+ })
+})
+}
+
+let log3 = ref([]);
+const test3 = () => {
+ log3.value = []
+ log3.value.push('script start');
+
+setTimeout(function () {
+ log3.value.push('setTimeout');
+}, 0);
+
+Promise.resolve()
+ .then(function () {
+ log3.value.push('promise1');
+ })
+ .then(function () {
+ log3.value.push('promise2');
+ });
+
+ log3.value.push('script end');
+}
@@ -220,21 +280,35 @@ setTimeout(() => {
+
+
{{ msg }}
+
+
+
不同类型的任务会进入对应的Event Queue，比如setTimeout和setInterval会进入相同的Event Queue。
-事件循环的顺序，决定js代码的执行顺序。进入整体代码(宏任务)后，开始第一次循环。接着执行所有的微任务。然后再次从宏任务开始，找到其中一个任务队列执行完毕，再执行所有的微任务。听起来有点绕，我们用文章最开始的一段代码说明：
+事件循环的顺序，决定js代码的执行顺序。进入整体代码(宏任务)后，开始第一次循环。接着执行所有的微任务。然后再次从宏任务开始，找到其中一个任务队列执行完毕，再执行所有的微任务。听起来有点绕，我们用一段代码说明：
-setTimeout(function() {
- console.log('setTimeout');
-})
+console.log('script start');
-new Promise(function(resolve) {
- console.log('promise');
-}).then(function() {
- console.log('then');
-})
+setTimeout(function () {
+ console.log('setTimeout');
+}, 0);
+
+Promise.resolve()
+ .then(function () {
+ console.log('promise1');
+ })
+ .then(function () {
+ console.log('promise2');
+ });
-console.log('console');
+console.log('script end');
++
实际验证下： + + + 请狠狠点击执行
+结果：
+
+
+ {{ item }}
+- 这段代码作为宏任务，进入主线程。
- 先遇到setTimeout，那么将其回调函数注册后分发到宏任务Event Queue。(注册过程与上同，下文不再描述) @@ -292,6 +366,15 @@ setTimeout(function() {
- 整体script作为第一个宏任务进入主线程，遇到console.log，输出1。
+
实际验证下： + + + 请狠狠点击执行
+结果：
+
+
+ {{ item }}
+第一轮事件循环流程分析如下：