console
var ball1 = document.querySelector('.ball1');
var ball2 = document.querySelector('.ball2');
var ball3 = document.querySelector('.ball3');
//promise
var Promise = window.Promise;
//使用 promise 替代回调函数
function promiseAnimate(ball, distance) {
return new Promise(function(resolve, reject) {
function _animate() {
//setTimeout过渡效果
setTimeout(function() {
var marginLeft = parseInt(ball.style.marginLeft, 10);
console.log(marginLeft);
if (marginLeft == distance) {
//resolve函数：将Promise对象的状态从 “未完成”变为 “成功”
//（Pending ->Resolved），在异步操作成功时调用，
//并将异步操作的结果，作为参数传递出去
resolve(ball, distance);
} else {
if (marginLeft < distance) {
marginLeft++;
}
if (marginLeft > distance) {
marginLeft--;
}
ball.style.marginLeft = marginLeft + 'px';
//callback
_animate();
}
},
13);
}
_animate();
});
}
promiseAnimate(ball1, 150).then(function() {
return promiseAnimate(ball2, 250);
}).then(function() {
return promiseAnimate(ball3, 300);
}).then(function() {
return promiseAnimate(ball3, 200);
}).then(function() {
return promiseAnimate(ball2, 100);
}).then(function() {
return promiseAnimate(ball1, 50);
})
/*常规写法*/
/*function animateBall(ball, distance, callback) {
//setTimeout过渡效果
setTimeout(function() {
var marginLeft = parseInt(ball.style.marginLeft, 10);
console.log(marginLeft);
if (marginLeft == distance) {
callback && callback();
} else {
if (marginLeft < distance) {
marginLeft++;
}
if (marginLeft > distance) {
marginLeft--;
}
ball.style.marginLeft = marginLeft + 'px';
//callback
animateBall(ball, distance, callback);
}
},
13);
}
var ball1 = document.querySelector('.ball1');
var ball2 = document.querySelector('.ball2');
var ball3 = document.querySelector('.ball3');
animateBall(ball1, 150,
function() {
animateBall(ball2, 250,
function() {
animateBall(ball3, 350,
function() {
animateBall(ball3, 200,
function() {
animateBall(ball2, 100,
function() {
animateBall(ball1, 50,
function() {
})
})
})
})
})
})*/
<body>
<div class="ball ball1" style="margin-left:0px;">
</div>
<div class="ball ball2" style="margin-left:0px;">
</div>
<div class="ball ball3" style="margin-left:0px;">
</div>
</body>
.ball {
width: 40px;
height: 40px;
border-radius: 20px;
margin-left: 0;
}
.ball1 {
background-color: yellow;
}
.ball2 {
background-color: red;
}
.ball3 {
background-color: blue;
}