話不多話沪铭，先上效果圖！
效果圖
如上圖所示偏瓤，這種效果很明顯是異步操作杀怠，我們對(duì)這種異步的操作一般都是用回調(diào)函數(shù)來實(shí)現(xiàn)的。我們來實(shí)現(xiàn)一下這種效果厅克。
<!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>小球回調(diào)</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參數(shù)
}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
效果實(shí)現(xiàn)以后赔退，我們會(huì)發(fā)現(xiàn)調(diào)用的時(shí)候，因?yàn)橐恢笔腔卣{(diào)函數(shù)证舟，所以就一直是函數(shù)的嵌套硕旗，現(xiàn)在只是幾個(gè)，如果再多的話女责，還是繼續(xù)嵌套漆枚，到最后代碼維護(hù)起來是很麻煩的。有問題出現(xiàn)就會(huì)有解決辦法抵知，于是es6中的promise應(yīng)運(yùn)而生墙基。下面我們來改造一下上面的寫法！
<!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>小球回調(diào)</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>
