<body>
<button>点击触发定时器</button>
<script>
let btn = document.querySelector('button');
btn.onclick = function () {
setTimeout(function () {
alert('执行定时器');
}, 0)
}
console.log('我先执行');
</script>
</body>
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)
<body>
<button onclick="loadXML()">点击获取结果</button>
<div></div>
<script>
function loadXML() {
let xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
console.log(xmlhttp)
document.querySelector('div').innerHTML = JSON.parse(xmlhttp.responseText).data[0].content;
}
}
xmlhttp.open('GET', 'https://cnodejs.org/api/v1/topics', true)
xmlhttp.send()
console.log('我先执行了')
}
</script>
</body>
pendding ,fulfilled,rejected
setTimeout(() => console.log(1), 0); // 异步
const p = new Promise((resolve, reject) => {
console.log(2); // 同步
setTimeout(() => {
console.log(4) // 异步优先级低于promise
}, 0)
resolve(3);
console.log(5); // 同步
})
console.log(6) // 同步
p.then(value => {
console.log(value); // 异步
})
console.log(7) // 同步
2 5 6 7 3 1 4
// 纯回调
function createdAsync(value,success,catch){
if (value){
success()
}else{
catch()
}
}
const success = function (){
console.log('成功')
}
const catch = catch(){
console.log('失败')
}
createdAsync(value,success,catch)
// promise
const promise = createdAsync(value);
setTimeout(()=>{
promise.then(success,catch);
},1000);
const p = new Promise((resolve, reject) => {
console.log("executor执行器函数"); // executor执行器函数
// 异步任务
resolve("异步")
})
p.then(value => {
console.log(value);
})
console.log("new Promise 之后")
Generator
函数的语法糖。 // 以往定义promise的时候
new Promise((resolve,reject)=>{
console.log('开始');
resolve('异步');
}).then(value => {console.log(value)})
// async函数
async function fn(){}
console.log(fn()) // Promise{<fulfilled>:undefined}
// promise
const promise = new Promise((resolve, reject) => {
resolve('异步');
})
promise.then(value => {
console.log(value)
})
// async
async function fn(callback) {
const val = await callback;
console.log(val)
}
fn(promise)
}
// promise
new Promise((resolve, reject) => {
resolve(1);
}).then(value => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(value + 1)
})
});
}).then(value => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(value + 1)
})
});
}).then(value => {
console.log(value + 1)
})
console.log('我先')
// ascyn
async function fn() {
const one = await new Promise((resolve, reject) => {
resolve(1)
})
const two = await new Promise((resolve, reject) => {
resolve(one + 1)
})
console.log(two);
console.log('我先')
}
fn()