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

课程源码及容易出现的问题-20180919

1、课程的源码。

2、课程中容易出现的问题。

aSuncat

2018-09-19

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

关注问题我要回答

1139

操作

收起

3 回答

aSuncat 提问者
2018-09-19

2、常见问题：

（1）现在的nodejs版本已内置Promise，不用安装bluebird。

（2）margin-left:0，样式要写成内联样式，不然无法通过ball.style.marginLeft获取到值。

（3）如果是html5,<!DOCTYPE html>，ball.style.marginLeft = marginLeft + 'px',后面要加'px'，不然marginLeft样式设置失败，导致每次重新取到的marginLeft值都是0，球不会动。

（4）marginLeft === distance时，执行resolve(), 而不是只写resolve。

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

收起回答

aSuncat 提问者
2018-09-19

1、课程源码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <meta name="format-detection" content="telephone=no">
  <title>promise animation</title>
  <style>
 .ball {
      width:40px;
      height:40px;
      border-radius:20px;
    }
    .ball1 {
      background:#f00;
    }
    .ball2 {
      background:#ff0;
    }
    .ball3 {
      background:#0f0;
    }
  </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>
 var ball1 = document.querySelector('.ball1');
  var ball2 = document.querySelector('.ball2');
  var ball3 = document.querySelector('.ball3');

  function promiseAnimate(ball, distance) {
    return new Promise(function (resolve, reject) {
      function _animate() {
        setTimeout(function () {
          var marginLeft = parseInt(ball.style.marginLeft, 10);
          if (marginLeft === distance) {
            // cb && cb();
             resolve();
          } else {
            marginLeft < distance ? marginLeft++ : marginLeft--;
            ball.style.marginLeft = marginLeft + 'px';
                // animate(ball, distance, cb);
                 _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);
        })

 //  animate(ball1, 100, function() {
  //    animate(ball2, 200, function() {
  //      animate(ball3, 300, function() {
  //        animate(ball3, 150, function() {
  //          animate(ball2, 150, function() {
  //            animate(ball1, 150, function() {
  //
  //            })
  //          })
  //        })
  //      })
  //    })
  //  })
</script>
</body>
</html>

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

收起回答

aSuncat 提问者

与1楼回答的代码一样，这里重复回答了。

2018-09-19 回复有任何疑惑可以回复我~

aSuncat 提问者
2018-09-19

1、课程源码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <meta name="format-detection" content="telephone=no">
  <title>promise animation</title>
  <style>
 .ball {
      width:40px;
      height:40px;
      border-radius:20px;
    }
    .ball1 {
      background:#f00;
    }
    .ball2 {
      background:#ff0;
    }
    .ball3 {
      background:#0f0;
    }
  </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>
 var ball1 = document.querySelector('.ball1');
  var ball2 = document.querySelector('.ball2');
  var ball3 = document.querySelector('.ball3');

  function promiseAnimate(ball, distance) {
    return new Promise(function (resolve, reject) {
      function _animate() {
        setTimeout(function () {
          var marginLeft = parseInt(ball.style.marginLeft, 10);
          if (marginLeft == distance) {
            // cb && cb();
             resolve();
          } else {
            marginLeft < distance ? marginLeft++ : marginLeft--;
            ball.style.marginLeft = marginLeft + 'px';
            // animate(ball, distance, cb);
             _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);
        })

 //  animate(ball1, 100, function() {
  //    animate(ball2, 200, function() {
  //      animate(ball3, 300, function() {
  //        animate(ball3, 150, function() {
  //          animate(ball2, 150, function() {
  //            animate(ball1, 150, function() {
  //
  //            })
  //          })
  //        })
  //      })
  //    })
  //  })
</script>
</body>
</html>

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

收起回答