<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// function teach(f) { // 上课函数
// setTimeout(() => {
// console.log('上课结束')
// f()
// }, 1000)
// }
// 使用promise对象对teach进行重新封装
function pTeach(f) { //新的上课函数
let p = new Promise((resolve, reject) => {
// 模拟上课
setTimeout(() => {
console.log('上课结束')
f() // 下课要做的事情
resolve()
}, 1000)
})
return p
}
console.log('开始上第一节课了')
pTeach(function () {
console.log('上厕所')
})
.then(() => {
console.log('开始上第二节课了')
return pTeach(function () {
console.log('我跳广播体操')
})
}).then(() => {
console.log('开始上第三节课了')
return pTeach(function () {
console.log('我去找隔壁女同学')
})
}).then(() => {
console.log('开始上第四节课了')
return pTeach(function () {
console.log('我去找隔壁女同学')
})
})
// t通过promise封装后的上课函数,虽然在一定程度上解决了回调地狱问题
// 但是书写代码的层级关系 还是有一点点怪
</script>
</body>
</html>