小球移动速度
难道就我一个人遇到这个问题？一号球移动缓慢，二三号球一瞬间就完成了移动
4 回答
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.ball {
width: 40px;
height: 40px;
border-radius: 20px;
margin-left: 0;
}
.ball1 {
background-color: red;
}
.ball2 {
background-color: green;
}
.ball3 {
background-color: blue;
}
</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');
console.log(ball1);
function animate(ball, distance, cb, flag) {
//flag 用来模拟并发
setTimeout(function() {
var marginLeft = parseInt(ball.style.marginLeft, 10);
console.log(marginLeft);
if(marginLeft === distance && flag !== true) {
return cb && cb(); //return 避免无限循环
}
else if(marginLeft < distance) {
marginLeft++;
}
else if(marginLeft > distance) {
marginLeft--;
}
if(flag === true) {
cb();
}
ball.style.marginLeft = marginLeft + 'px';
console.log(ball + '!!!');
animate(ball, distance, cb);
}, 13);
}
animate(ball1, 100, function() {
animate(ball2, 200, function() {
animate(ball3, 300, function() {
animate(ball3, 200, function() {
animate(ball1, 200, function() {
});
}, true);
});
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.ball {
width: 40px;
height: 40px;
border-radius: 20px;
margin-left: 0;
}
.ball1 {
background-color: red;
}
.ball2 {
background-color: green;
}
.ball3 {
background-color: blue;
}
</style>
<script type="text/javascript" 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 type="text/javascript">
var ball1 = document.querySelector('.ball1');
var ball2 = document.querySelector('.ball2');
var ball3 = document.querySelector('.ball3');
console.log(ball1);
/*animate(ball1, 100, function() {
animate(ball2, 200, function() {
animate(ball3, 300, function() {
animate(ball3, 200, function() {
animate(ball1, 200, function() {
});
}, true);
});
});
});*/
var Promise = window.Promise;
function promiseAnimate(ball, distance) {
return new Promise(function(resolve, reject) {
function _animate() {
var flag = false;//按老师的会不断循环，所以我加了个flag标志
setTimeout(function() {
var marginLeft = parseInt(ball.style.marginLeft, 10);
console.log(marginLeft);
if(marginLeft === distance) {
flag = true;
resolve();
}
else {
if(marginLeft < distance) {
marginLeft++;
}
else {
marginLeft--;
}
}
ball.style.marginLeft = marginLeft + 'px';
// console.log(ball + '!!!');
if(!flag) {
_animate();
}
}, 20);
}
_animate();
});
}
promiseAnimate(ball1, 100)
.then(function() {
return promiseAnimate(ball2, 200)
})
.then(function() {
return promiseAnimate(ball3, 300)
})
.then(function() {
return promiseAnimate(ball3, 200)
})
.then(function() {
return promiseAnimate(ball1,200)
});
</script>
</body>
</html>
举报
0/150
提交
取消
