小球移動(dòng)速度
難道就我一個(gè)人遇到這個(gè)問題？一號(hào)球移動(dòng)緩慢，二三號(hào)球一瞬間就完成了移動(dòng)
slairmy
2017-11-13
4 回答
舉報(bào)
0/150
提交
取消
2017-11-23
<!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 用來模擬并發(fā)
setTimeout(function() {
var marginLeft = parseInt(ball.style.marginLeft, 10);
console.log(marginLeft);
if(marginLeft === distance && flag !== true) {
return cb && cb();? ?//return 避免無限循環(huán)
}
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>
2017-11-23
<!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;//按老師的會(huì)不斷循環(huán)，所以我加了個(gè)flag標(biāo)志
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>
2017-11-23
你看看你的循環(huán)是不是出現(xiàn)問題了
必須放在else里哦，我也出現(xiàn)類似問題，如果放在判斷外這個(gè)方法就會(huì)一直跑的
2017-11-18
沒錯(cuò)，就你一個(gè)人