                        课程
                    
                        /前端开发
                        
                            /Node.js
                        
                        /进击Node.js基础（二）

按照老师的写法，style报错了

Uncaught TypeError: Cannot read property 'style' of undefined 什么情况啊

只此一生为红颜

2016-04-18

源自：进击Node.js基础（二） 1-2

关注问题我要回答

884

操作

收起

4 回答

慕先生4822841
2017-04-06

function _animate(ball,distance,cb)写成 function _animate()，_animate()调用的时候也没有参数

0 回复有任何疑惑可以回复我~

收起回答

我不在
2016-06-19

我也是这个错误，不知道老师是怎么测试通过的，总感觉参数传导有问题

0 回复有任何疑惑可以回复我~

收起回答

只此一生为红颜提问者
2016-04-18

把方法里的参数去掉就好了.

1 回复有任何疑惑可以回复我~

收起回答

只此一生为红颜提问者
2016-04-18

<!doctype html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Promise animation</title>
   <style>
   .ball{
       width:40px;
       height:40px;
       border-radius: 20px;
       }
    .ball1{background: red;}
    .ball2{background: yellow;}
    .ball3{background: blue;}

   </style>
   <script src="./node_modules/bluebird/js/browser/bluebird.js"></script>
</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>
   var ball1 = document.querySelector('.ball1')
   var ball2 = document.querySelector('.ball2')
   var ball3 = document.querySelector('.ball3')

   function animate(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'
               animate(ball,distance,cb)
           }
       },13)
   }
   /*animate(ball1,100,function(){
       animate(ball2,200,function(){
           animate(ball3,300,function(){
               animate(ball3,150,function(){
                   animate(ball2,150,function(){
                       animate(ball1,150,function(){
                        })
                    })
                })
            })
        })
   })*/
    var Promise = window.Promise;
    function promiseAnimate(ball,distance){
       return new Promise(function(resolve,reject){

   function _animate(ball,distance,cb){
       setTimeout(function(){
           var marginLeft = parseInt(ball.style.marginLeft,10);
           if(marginLeft==distance){
               resolve();
           }
           else{
               if(marginLeft<distance){
                   marginLeft++
               }
               else{
                    marginLeft--
               }
               ball.style.marginLeft=marginLeft +'px'
               _animate()
           }
       },13)
   }
   _animate()
       })
    }

    promiseAnimate(ball1,100)
    .then(function(){
       return promiseAnimate(ball2,200)
    })
    .then(function(){
       return promiseAnimate(ball3,300)
    })
    .then(function(){
       return promiseAnimate(ball3,150)
    })
    .then(function(){
       return promiseAnimate(ball2,150)
    })
    .then(function(){
       return promiseAnimate(ball1,150)
    })
   </script>
</body>
</html>