小球不動。
<!DOCTYPE?html>
<html?lang="en">
<head>
<meta?charset="UTF-8">
<title>Document</title>
<style>
.ball?{
width:?40px;
height:?40px;
border-radius:?20px;
}
.ball?{
background:?red;
}
.ball2?{
background:?yellow;
}
.ball3?{
background:?green;
}
</style>
<script?src="../promise/1.js">
</script>
</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');
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(ball,distance);
})
}
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>代碼如上，引用的是bluebird.min.js。確認引用上了，只是改名為上述。瀏覽器是chrome
2017-06-10
替你測試過了，首先_animate();沒有參數，其次要引用bluebird.js 路徑要對
<script?src="../promise/1.js"></script>注意下奧~
2017-06-10
<!DOCTYPE html>
<html>
?
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.ball {
width: 40px;
height: 40px;
border-radius: 20px;
}
?
.ball {
background: red;
}
?
.ball2 {
background: yellow;
}
?
.ball3 {
background: green;
}
</style>
<script src="./node_modules/bluebird/js/browser/bluebird.js" type="text/javascript" charset="utf-8" async defer></script>
</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');
var Promise = window.Promise;
function promiseAnimate(ball, distance) {
return new Promise(function (resolve, reject) {
function _animate() {
?
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>