es6 promise写个小球滚动
2018-10-14 本文已影响21人
小白小白啦
参考慕课网课程写一个小球的滚动操作，就是把下图三个小球分别右移动100px、200px、300px但是要求是红色滚动完成后，黄色开始滚动，黄色完成后，绿色开始滚动。
三个小球
主要使用回调函数、promise、async三种方法编写。我对promise的理解就是它是一个"承诺"，只有执行到了resolve()函数，才会触发then里面的函数，就是我给then里面的回调函数一个"承诺"，放心小伙子，到时候我一定执行你的，你就老老实实待着吧。
思路： 一般的做法就是使用setTimeout函数，十几毫秒刷新一下，产生移动的感觉。
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
.ball {
width: 40px;
height: 40px;
border-radius: 20px;
margin-bottom: 5px;
}
.ball1 {background: red;}
.ball2 {background: yellow;}
.ball3 {background: green;}
</style>
</head>
<body>
<div class="ball ball1" style="margin-left: 0"></div>
<div class="ball ball2" style="margin-left: 0"></div>
<div class="ball ball3" style="margin-left: 0"></div>
<script>
var ball1 = document.querySelector('.ball1')
var ball2 = document.querySelector('.ball2')
var ball3 = document.querySelector('.ball3')
function animate(ball, distance, cb) {
setTimeout(function () {
var marginLeft = parseInt(ball.style.marginLeft, 10)
if (marginLeft === distance) {
cb && cb()
} else {
if (marginLeft < distance) {
marginLeft++
} else {
marginLeft--;
}
ball.style.marginLeft = marginLeft + 'px';
animate(ball, distance, cb)
}
}, 13)
}
animate(ball1, 100)
animate(ball2, 200)
animate(ball3, 300)
</script>
</body>
</html>
发现三个小球同时运动，并不会顺序执行,那怎么办？聪明的小伙伴肯定想到了回调函数，接下来基于回到函数写一下。
回调函数版本
animate(ball1, 100, function(){
animate(ball2, 200, function(){
animate(ball3, 300)
})
})
这样就可以实现顺序执行了，但是有个问题，会陷入回调地狱，代码很长不宜阅读。运用promise改下一下
promise版本
function animatePro(ball, distance){
return new Promise((resolve, reject) => {
function _animate(){
setTimeout(()=>{
var marginLeft = parseInt(ball.style.marginLeft, 10)
if (marginLeft === distance) {
resolve()
} else {
if (marginLeft < distance) {
marginLeft++
} else {
marginLeft--;
}
ball.style.marginLeft = marginLeft + 'px';
_animate()
}
}, 13)
}
_animate()
})
}
animatePro(ball1, 100)
.then(()=>{
return animatePro(ball2, 200)
})
.then(() => {
return animatePro(ball3, 300)
})
这样代码就清晰多了，还可以更进一步，使用async编写
async版本
let animation = async function(){
let b1 = await animatePro(ball1, 100)
let b2 = await animatePro(ball2, 200)
let b3 = await animatePro(ball3, 300)
}
animation()
这就是和普通的代码一样了。
