Mecanismo operativo JavaScript.md

• Algunas macro tareas comunes (hilo principal) y micro tareas (tareas asincrónicas)

macrotask	microtareas
setTimeout	process.nextTick
setInterval	Promesas
setImmediate	Object.observe
requestAnimationFrame	-
E / S	-
Representación de la interfaz de usuario	-

Mecanismo operativo JS

• En el caso de una macro tarea cíclica, cada vez que se completa la ronda actual de ejecución de la macro tarea, se pregunta a la cola de tareas si hay una tarea, si hay ejecución y no hay ejecución de la siguiente ronda de macro tarea.
  
• ES6: async + await La
  función async devuelve un objeto de promesa, es decir, esperará a que continúe con la tarea macro después de que se complete la tarea en espera.

async function test() {
    
    
    await new Promise((res) => {
    
    
        console.log(1);
        res('成功');
    }).then(() => {
    
    
        console.log(2);
    })
    console.log(3);
}
test(); //1->2->3

Ejercicios del mecanismo de operación JS

Pregunta 1

function test() {
    
    
    console.log(1);
    setTimeout(() => {
    
    
        console.log(2); //遇见setTimeout 放入下一轮宏任务循环中
    }, 1);
    [3, 4, 5].forEach((ele) => {
    
    
        new Promise(res => {
    
    
            res(ele);
        }).then(res => {
    
    
            console.log(res); //遇见.then(fn)放入异步线程执行
        })
   })
 }
 test(); //1->3,4,5->2

Pregunta 2

function test() {
    
    
    console.log(1);
    setTimeout(() => {
    
    
        console.log(2); //遇见setTimeout 放入下一轮宏任务循环中
    }, 1);
    setTimeout(() => {
    
    
        console.log(55);
        [3, 4, 5].forEach((ele) => {
    
    
            new Promise((res) => {
    
    
                console.log(99);
                res(ele);
            }).then((res) => {
    
    
                console.log(res); //遇见.then(fn)放入异步线程执行
           });
       });
    }, 0);
   }
test(); //1->2->55->99,99,99->3,4,5

Pregunta 3

async function test() {
    
    
    console.log(1);
    setTimeout(() => {
    
    
       console.log(2);
    }, 1);
    setTimeout(() => {
    
    
        console.log(666);
        [3, 4, 5].forEach((ele) => {
    
    
            new Promise((res) => {
    
    
                res(ele);
            }).then((res) => {
    
    
                console.log(res);
            });
       });
       console.log(6);
    }, 0);
    await new Promise((res) => {
    
    
        res(7);
    }).then((res) => {
    
    
        console.log(res);
    });
}
test(); //1->7->2->666->6->3,4,5

Pregunta 4

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
//微任务① nextTick  6-> ②then  8
//宏任务① setTimeout()  2-> 4->3->5

//宏任务② setTimeout() 9->11->10->12
//第一轮  1->7->6->8

Pregunta 5

Promise.resolve().then(() => {
    
    
    console.log('1')
    setTimeout(() => {
    
    
        console.log('2')
    }, 0)
})

setTimeout(() => {
    
    
    console.log('3')
    Promise.resolve().then(() => {
    
    
        console.log('4')
    })
}, 0)

//1->3->2->4

Pregunta 6

console.log(1)
setTimeout(function() {
    
    
    console.log(2);
    let promise = new Promise(function(resolve, reject) {
    
    
        console.log(7);
        resolve()
    }).then(function() {
    
    
        console.log(8)
    });
}, 1000);

setTimeout(function() {
    
    
    console.log(10);
    let promise = new Promise(function(resolve, reject) {
    
    
        console.log(11);
        resolve()
    }).then(function() {
    
    
        console.log(12)
    });
}, 0);

let promise = new Promise(function(resolve, reject) {
    
    
    console.log(3);
    resolve()
}).then(function() {
    
    
    console.log(4)
}).then(function() {
    
    
    console.log(9)
});

console.log(5)

//主线程任务 1->3->5
//宏任务① setTimeout 2->7->8
//宏任务② setTimeout 10->11->12
//微任务 promise  4->9
//第一轮 1->3->5->4->9
//第二轮 10->11->12
//第三轮 2->7->8

Pregunta 7

console.log("AAAA"); //①
setTimeout(() => console.log("BBBB"), 1000); //⑥
const start = new Date();
while (new Date() - start < 3000) {
    
    }

console.log("CCCC"); //②
setTimeout(() => console.log("DDDD"), 0); //⑦
new Promise((resolve, reject) => {
    
    
        console.log("EEEE"); //③
        foo.bar(100);
    })
    .then(() => console.log("FFFF"))
    .then(() => console.log("GGGG"))
    .catch(() => console.log("HHHH")); //⑤
console.log("IIII"); //④

setTimeout(function() {
    
    
    console.log('setTimeout'); //⑧
})
//AAAA  CCCC  EEEE  IIII  HHHH BBBB DDDD  setTimeout

Pregunta 8

async function async1() {
    
    
    console.log("AAAA"); //②
    async2();
    console.log("BBBB"); //④
}
async function async2() {
    
    
    console.log("CCCC"); //③
}
console.log("DDDD"); //①
setTimeout(function() {
    
    
    console.log("FFFF"); //⑧
}, 0);
async1();
new Promise(function(resolve) {
    
    
    console.log("GGGG"); //⑤
    resolve();

}).then(function() {
    
    
    console.log("HHHH"); //⑦

});
console.log("IIII"); //⑥

//这道题的坑就在于 async中如果没有await，那么它就是一个纯同步函数
//DDDD AAAA CCCC BBBB  GGGG IIII HHHH FFFF

Pregunta 9

console.log('start'); //①第一轮整体代码
setTimeout(() => {
    
    
    console.log('children2'); //③第二轮宏任务
    Promise.resolve().then(() => {
    
    
        console.log('children3'); //④微任务
    })
}, 0); //宏任务
new Promise((resolve, reject) => {
    
    
    console.log('children4'); //②第一轮整体代码
    setTimeout(() => {
    
    
        console.log('children5'); //⑤第三轮宏任务
        resolve('children6') //执行微任务
    }, 0); //宏任务
}).then((res) => {
    
     //.then要有resolve才会执行，resolve在setTimeout里暂不执行
    console.log('children7');
    setTimeout(() => {
    
    
        console.log('res');
    }, 0)

});
//start children4 children2 children3 children5 children7 children6

Pregunta 10

• Promise's.then () se ejecutará solo después de resolve ()

const p = function() {
    
    
    return new Promise((resolve, reject) => {
    
    
        const p1 = new Promise((resolve, reject) => {
    
    
            setTimeout(() => {
    
    
                resolve(1)
            }, 0);
            resolve(2) //resolve2会比resolve1先执行resolve1延迟执行，2执行完1就没了因为promise状态已改变
        })
        p1.then((res) => {
    
    
            console.log(res) //③微任务
        })
        console.log(3); //①第一轮整体代码
        resolve(4) //④微任务
    })
}
p().then((res) => {
    
    
    console.log(res);
})
console.log('end'); //②第一轮整体代码
//3 end 2 4

Referencia de publicación de
blog 1 Referencia de publicación de blog 2
Explicación detallada del mecanismo operativo de JavaScript: Hablemos de la explicación asincrónica de Event Loop