话不多话，先上效果图！
效果图
如上图所示，这种效果很明显是异步操作，我们对这种异步的操作一般都是用回调函数来实现的。我们来实现一下这种效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>小球回调</title>
<style>
.ball{
width: 50px;
height: 50px;
border-radius: 50%;
}
#ball1{
background-color: #f00;
}
#ball2{
background-color: #0f0;
}
#ball3{
background-color: #00f;
}
</style>
</head>
<body>
<div class="ball" id="ball1" style="margin-left:0px;"></div>
<div class="ball" id="ball2" style="margin-left:0px;"></div>
<div class="ball" id="ball3" style="margin-left:0px;"></div>
</body>
<script>
var ball1 = document.getElementById("ball1");
var ball2 = document.getElementById("ball2");
var ball3 = document.getElementById("ball3");
function ballAnimate(dom,distance,fn){
setTimeout(() => {
let marginLeft = parseInt(dom.style.marginLeft);
if(distance==marginLeft){
fn && fn();//判断有无fn参数
}else{
if(distance>marginLeft){
marginLeft++;
}else{
marginLeft--;
}
dom.style.marginLeft = marginLeft + 'px';
ballAnimate(dom,distance,fn);
}
}, 10);
}
ballAnimate(ball1,100,()=>{
ballAnimate(ball2,100,()=>{
ballAnimate(ball3,100,()=>{
ballAnimate(ball1,0,()=>{
ballAnimate(ball2,0,()=>{
ballAnimate(ball3,0);
});
});
});
});
});
</html>
image.png
效果实现以后，我们会发现调用的时候，因为一直是回调函数，所以就一直是函数的嵌套，现在只是几个，如果再多的话，还是继续嵌套，到最后代码维护起来是很麻烦的。有问题出现就会有解决办法，于是es6中的promise应运而生。下面我们来改造一下上面的写法！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>小球回调</title>
<style>
.ball{
width: 50px;
height: 50px;
border-radius: 50%;
}
#ball1{
background-color: #f00;
}
#ball2{
background-color: #0f0;
}
#ball3{
background-color: #00f;
}
</style>
</head>
<body>
<div class="ball" id="ball1" style="margin-left:0px;"></div>
<div class="ball" id="ball2" style="margin-left:0px;"></div>
<div class="ball" id="ball3" style="margin-left:0px;"></div>
</body>
<script>
var ball1 = document.getElementById("ball1");
var ball2 = document.getElementById("ball2");
var ball3 = document.getElementById("ball3");
function promiseBallAnimate(dom,distance){
return new Promise(function(res,rej){
function animate(){
setTimeout(() => {
let marginLeft = parseInt(dom.style.marginLeft);
if(distance==marginLeft){
res(dom,distance);
}else{
if(distance>marginLeft){
marginLeft++;
}else{
marginLeft--;
}
dom.style.marginLeft = marginLeft + 'px';
animate();
}
}, 10);
}
animate();
})
}
promiseBallAnimate(ball1,100).then(()=>{
return promiseBallAnimate(ball2, 100);
}).then(()=>{
return promiseBallAnimate(ball3, 100);
}).then(()=>{
return promiseBallAnimate(ball1, 0);
}).then(()=>{
return promiseBallAnimate(ball2, 0);
}).then(()=>{
return promiseBallAnimate(ball3, 0);
})
</script>
</html>
