首先用嘴简单的方式实现一个动画效果
<!doctype><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: 0"></div> ???<div class="ball ball2" style="margin-left: 0"></div> ???<div class="ball ball3" style="margin-left: 0"></div> ???<script type="text/javascript"> ???????//定义三个球 ???????var ball1 = document.querySelector(‘.ball1‘) ???????var ball2 = document.querySelector(‘.ball2‘) ???????var ball3 = document.querySelector(‘.ball3‘) ???????//球，移动距离，回调函数 ???????function animate(ball, distance, cd){ ???????????//每13毫秒改变一次圆球的位置，直到到达指定位置 ???????????setTimeout(function(){ ???????????????var marginLeft = parseInt(ball.style.marginLeft,10) ???????????????//球达到预期位置 ???????????????if(marginLeft === distance){ ???????????????????cd && cd() ???????????????}else{ ???????????????????//球在左侧 ???????????????????if(marginLeft < distance){ ???????????????????????marginLeft++ ???????????????????}else{ ???????????????????????//球在右侧 ???????????????????????marginLeft-- ???????????????????} ???????????????????//调整球的位置 ???????????????????ball.style.marginLeft = marginLeft ???????????????????animate(ball, distance, cd) ???????????????} ???????????},13) ???????} ???????//控制动画 ???????animate(ball1, 100,function(){ ???????????animate(ball2, 200, function(){ ???????????????animate(ball3, 150, function(){ ???????????????????animate(ball2, 150, function(){ ???????????????????????animate(ball1, 150, function(){ ???????????????????????}) ???????????????????}) ???????????????}) ???????????}) ???????}) ???</script></body></html>10慕课网《进击Node.js基础（一）》初识promise
原文地址：https://www.cnblogs.com/-beauTiFul/p/9195868.html