2222 background : blue;
2323 }
2424 </ style >
25+ < script src ="./node_modules/bluebird/js/browser/bluebird.js "> </ script >
2526</ head >
2627< body >
2728 < div class ="ball ball1 " style ="margin-left: 0 "> </ div >
2829 < div class ="ball ball2 " style ="margin-left: 0 "> </ div >
2930 < div class ="ball ball3 " style ="margin-left: 0 "> </ div >
3031 < script type ="text/javascript ">
31- var ball1 = document . querySelector ( ".ball1" ) ;
32- var ball2 = document . querySelector ( ".ball2" ) ;
33- var ball3 = document . querySelector ( ".ball3" ) ;
32+ var ball1 = document . querySelector ( ".ball1" ) ;
33+ var ball2 = document . querySelector ( ".ball2" ) ;
34+ var ball3 = document . querySelector ( ".ball3" ) ;
3435
35- function animate ( ball , distance , cb ) {
36- setTimeout ( function ( ) {
37- var marginLeft = parseInt ( ball . style . marginLeft , 10 ) ;
38- // console.log(marginLeft);
39- if ( marginLeft === distance ) {
40- cb && cb ( ) ;
41- } else {
42- if ( marginLeft < distance ) {
43- marginLeft ++ ;
44- } else {
45- marginLeft -- ;
46- }
36+ // function animate(ball,distance,cb){
37+ // setTimeout(function(){
38+ // var marginLeft=parseInt(ball.style.marginLeft,10);
39+ // // console.log(marginLeft);
40+ // if(marginLeft===distance){
41+ // cb && cb();
42+ // }else{
43+ // if(marginLeft<distance){
44+ // marginLeft++;
45+ // }else{
46+ // marginLeft--;
47+ // }
4748
48- ball . style . marginLeft = marginLeft + "px" ;
49- animate ( ball , distance , cb ) ;
49+ // ball.style.marginLeft=marginLeft+"px";
50+ // animate(ball,distance,cb);
51+ // }
52+ // },13);
53+ // }
54+
55+ // 这里是用回调的方式
56+ // animate(ball1,100,function(){
57+ // animate(ball2,200,function(){
58+ // animate(ball3,300,function(){
59+ // animate(ball3,150,function(){
60+ // animate(ball2,150,function(){
61+ // animate(ball1,150,function(){
62+ // // end;
63+ // });
64+ // });
65+ // });
66+ // });
67+ // });
68+ // });
69+
70+ // 这里是用Promise的方式
71+ var Promise = window . Promise ;
72+
73+ function promiseAnimate ( ball , distance ) {
74+ return new Promise ( function ( resolve , reject ) {
75+
76+ function _animate ( ball , distance ) {
77+ setTimeout ( function ( ) {
78+ var marginLeft = parseInt ( ball . style . marginLeft , 10 ) ;
79+ // console.log(marginLeft);
80+ if ( marginLeft === distance ) {
81+ resolve ( ) ;
82+ } else {
83+ if ( marginLeft < distance ) {
84+ marginLeft ++ ;
85+ } else {
86+ marginLeft -- ;
87+ }
88+
89+ ball . style . marginLeft = marginLeft + "px" ;
90+ _animate ( ball , distance ) ;
91+ }
92+ } , 13 ) ;
5093 }
51- } , 13 ) ;
94+ _animate ( ball , distance ) ;
95+ } ) ;
5296 }
5397
54- animate ( ball1 , 100 , function ( ) {
55- animate ( ball2 , 200 , function ( ) {
56- animate ( ball3 , 300 , function ( ) {
57- animate ( ball3 , 150 , function ( ) {
58- animate ( ball2 , 150 , function ( ) {
59- animate ( ball1 , 150 , function ( ) {
60- // end;
61- } ) ;
62- } ) ;
63- } ) ;
64- } ) ;
98+ promiseAnimate ( ball1 , 100 )
99+ . then ( function ( ) {
100+ return promiseAnimate ( ball2 , 200 ) ;
101+ } )
102+ . then ( function ( ) {
103+ return promiseAnimate ( ball3 , 300 ) ;
104+ } )
105+ . then ( function ( ) {
106+ return promiseAnimate ( ball3 , 150 ) ;
107+ } )
108+ . then ( function ( ) {
109+ return promiseAnimate ( ball2 , 150 ) ;
110+ } )
111+ . then ( function ( ) {
112+ return promiseAnimate ( ball1 , 150 ) ;
65113 } ) ;
66- } ) ;
67-
68-
69114 </ script >
70115</ body >
71116</ html >
0 commit comments