版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/TDCQZD/article/details/82431128
一、回调地狱
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
#wrap {
width: 300px;
height: 300px;
border: 1px solid;
/*居中*/
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
#wrap > div {
width: 20px;
height: 20px;
border-radius: 50%;
position: absolute;
}
#wrap > .circle {
margin-top: 100px;
background: blue;
}
#wrap > .circle2 {
margin-top: 150px;
background: red;
}
#wrap > .circle3 {
margin-top: 200px;
background: greenyellow;
}
</style>
</head>
<body>
<div id="wrap">
<div class="circle"></div>
<div class="circle2"></div>
<div class="circle3"></div>
</div>
</body>
<script>
window.onload = function () {
var circle = document.querySelector(".circle")
var circle2 = document.querySelector(".circle2")
var circle3 = document.querySelector(".circle3")
//小球移动方法
function move(ball, dis, cb) {
var timer = setInterval(function () {
var startLeft = ball.offsetLeft;
if (startLeft === dis) {
cb && cb();
clearInterval(timer);
} else {
if (startLeft < dis) {
startLeft++;
} else if (startLeft > dis) {
startLeft--;
}
ball.style.left = startLeft + "px";
}
}, 10)
}
//回调地狱实现方式
move(circle, 100, function () {
move(circle2, 150, function () {
move(circle3, 200, function () {
move(circle3, 150, function () {
move(circle2, 150, function () {
move(circle, 150, function () {
})
})
})
})
})
})
}
</script>
效果图:
二、Promise
<script>
window.onload = function () {
var circle = document.querySelector(".circle")
var circle2 = document.querySelector(".circle2")
var circle3 = document.querySelector(".circle3")
//小球移动方法
function move(ball, dis, cb) {
var timer = setInterval(function () {
var startLeft = ball.offsetLeft;
if (startLeft === dis) {
cb && cb();
clearInterval(timer);
} else {
if (startLeft < dis) {
startLeft++;
} else if (startLeft > dis) {
startLeft--;
}
ball.style.left = startLeft + "px";
}
}, 10)
}
//Promise实现方式
var promise = new Promise(function (resolve, reject) {
move(circle, 100, function () {
resolve(circle2)
})
});
promise
.then(function (c) {
return new Promise(function (resolve, reject) {
move(c, 150, function () {
resolve([circle3,200]);//数组传递多个数据
})
})
})
.then(function ([c,d]) {
return new Promise(function (resolve, reject) {
move(c, d, function () {
resolve({ c: circle3, d: 150 })//对象传递多个数据
})
})
})
.then(function (obj) {
return new Promise(function (resolve, reject) {
move(obj.c, obj.d, function () {
resolve()
})
})
})
.then(()=>{
return new Promise( (resolve, reject) => {
move(circle, 150, ()=> {
resolve();
})
})
});
}
</script>
三、generator
<script>
window.onload = function () {
var circle = document.querySelector(".circle")
var circle2 = document.querySelector(".circle2")
var circle3 = document.querySelector(".circle3")
//小球移动方法
function move(ball, dis, cb) {
var timer = setInterval(function () {
var startLeft = ball.offsetLeft;
if (startLeft === dis) {
cb && cb();
clearInterval(timer);
} else {
if (startLeft < dis) {
startLeft++;
} else if (startLeft > dis) {
startLeft--;
}
ball.style.left = startLeft + "px";
}
}, 10)
}
//Generator实现方式
var it = asyncMove();
it.next();
function * asyncMove() {
var yi = yield move(circle,100, ()=>{
it.next(circle2);
});
yield move(yi,150, ()=>{
it.next();
});
yield move(circle3,200, ()=>{
it.next();
});
yield move(circle3,150, ()=>{
it.next();
});
yield move(circle,150, ()=>{
it.next();
});
}
}
</script>
四、async&await
<script>
window.onload = function () {
var circle = document.querySelector(".circle")
var circle2 = document.querySelector(".circle2")
var circle3 = document.querySelector(".circle3")
//小球移动方法
function move(ball, dis, cb) {
var timer = setInterval(function () {
var startLeft = ball.offsetLeft;
if (startLeft === dis) {
cb && cb();
clearInterval(timer);
} else {
if (startLeft < dis) {
startLeft++;
} else if (startLeft > dis) {
startLeft--;
}
ball.style.left = startLeft + "px";
}
}, 10)
}
//Async&await地狱实现方式
asyncMove();
async function asyncMove() {
await new Promise((resolve,reject)=>{
move(circle,100,()=>{
resolve();
})
});
await new Promise((resolve,reject)=>{
move(circle2,150,()=>{
resolve();
})
});
await new Promise((resolve,reject)=>{
move(circle3,200,()=>{
resolve();
})
});
await new Promise((resolve,reject)=>{
move(circle3,150,()=>{
resolve();
})
});
await new Promise((resolve,reject)=>{
move(circle,150,()=>{
resolve();
})
});
}
}
</script>