event loop学习笔记
1、同步任务和DOM渲染
console.log("****event-start****");
$("div").append('<p>满堂花醉三千客</p>'); //DOM渲染
alert("aaaaaa")
在点击alert之前，DOM不会渲染。顺序：同步任务->DOM渲染
2、加入ajax
console.log("****event-start****");
$("div").append('<p>满堂花醉三千客</p>'); //DOM渲染
$.get("./data/test.json",data=>{ //ajax宏任务
alert('bbbbbb');
})
alert("aaaaaa")
顺序：同步任务->DOM渲染->ajax(宏任务)
3、加入setTimeout
console.log("****event-start****");
$("div").append('<p>满堂花醉三千客</p>'); //DOM渲染
setTimeout(function () {
alert("cccccc");
}, 0);
$.get("./data/test.json",data=>{ //ajax宏任务
alert('bbbbbb');
})
alert("aaaaaa")
顺序：同步任务->DOM渲染->ajax(宏任务)->setTimeout(宏任务)
为什么同是宏任务，ajax比setTimeout先执行
4、加入Promise
console.log("****event-start****");
$("div").append('<p>满堂花醉三千客</p>'); //DOM渲染
setTimeout(function () {
alert("cccccc");
}, 0);
$.get("./data/test.json",data=>{ //ajax宏任务
alert('bbbbbb');
})
let promise=new Promise((resolve,reject)=>{ //promise微任务
console.log('dddddd');
resolve('成功')
});
promise.then(()=>{
alert('dddddd')
});
alert("aaaaaa")
顺序：同步任务->Promise(微任务)->DOM渲染->ajax(宏任务)->setTimeout(宏任务)
5、宏任务中加入微任务
console.log("****event-start****");
$("div").append('<p>满堂花醉三千客</p>'); //DOM渲染
setTimeout(function () {
alert("cccccc");
}, 0);
$.get("./data/test.json",data=>{ //ajax宏任务
alert('bbbbbb');
let promise2=new Promise((resolve,reject)=>{ //promise微任务
console.log('eeeeee');
resolve('成功')
});
promise2.then(()=>{
alert('eeeeee')
});
})
let promise1=new Promise((resolve,reject)=>{ //promise微任务
console.log('dddddd');
resolve('成功')
});
promise1.then(()=>{
alert('dddddd')
});
alert("aaaaaa")
顺序：同步任务->Promise(微任务)->DOM渲染->ajax(宏任务)->ajax(Promise)(宏任务中的微任务)->setTimeout(宏任务)
6、微任务中的宏任务、宏任务中的宏任务
console.log("****event-start****");
$("div").append('<p>满堂花醉三千客</p>'); //DOM渲染
setTimeout(function () {
alert("cccccc");
}, 0);
$.get("./data/test.json",data=>{ //ajax宏任务
alert('bbbbbb');
let promise2=new Promise((resolve,reject)=>{ //promise微任务
console.log('eeeeee');
resolve('成功')
});
promise2.then(()=>{
alert('eeeeee')
});
})
let promise1=new Promise((resolve,reject)=>{ //promise微任务
console.log('dddddd');
resolve('成功')
});
promise1.then(()=>{
alert('ffffff')
$.get("./data/test.json",data=>{ //ajax宏任务
alert('gggggg');
})
});
$.get("./data/test.json",data=>{ //ajax宏任务
alert('hhhhhh');
$.get("./data/test.json",data=>{ //ajax宏任务
alert('iiiiii');
})
})
alert("aaaaaa")