為什么小球第二步回不去？代碼感覺一樣的呀~
<!DOCTYPE html>
<html>
<head>
<title>Promise animation</title>
<style type="text/css">
.ball{
width:40px;
height: 40px;
border-radius: 20px;
}
.ball1{
background: red;
}
.ball2{
background: yellow;
}
.ball3{
background: green;
}
</style>
</head>
<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>
<script type="text/javascript">
var ball1=document.querySelector('.ball1');
var ball2=document.querySelector('.ball2');
var ball3=document.querySelector('.ball3');
? ? ? ? ? ? function animation(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';
? ? ? ? ? ? ? ? ? ? animation(ball,distance,cb);
? ? ? ? ? ? ? ? },13)
? ? ? ? ? ? }
? ? ? ? ? ? animation(ball1,100,function(){
? ? ? ? ? ? ? ? animation(ball2,200,function(){
? ? ? ? ? ? ? ? ? ? animation(ball3,300,function(){
? ? ? ? ? ? ? ? ? ? ? ? animation(ball3,150,function(){
? ? ? ? ? ? ? ? ? ? ? ? ? ? animation(ball2,150,function(){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? animation(ball1,150,function(){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? })
? ? ? ? ? ? })
</script>
? ? ? ??
</body>
</html>
2018-06-11
看到其他同學的問答，發現問題了，需要在回歸cb&&cb();之后添加renturn false;即可恢復正常，小球的運行速度和第二次回復速度都正常了。停止循環即可正常。