我正在尝试深入研究 JavaScript 中错综复杂的动画，并提出一些功能性问题。在我的代码中，我试图在按下“按钮”后“发射”“火箭”。我注意到，一旦我启动我的函数，我的值就会计算出我想要的值，但是火箭在网页上的位置不会改变，直到函数返回。
下面是我的问题:
有什么方法可以在我的函数中动态更新火箭的位置 (rocket.style.top)？如果没有，更新位置的更好方法是什么？我应该在按钮上使用事件监听器以外的东西吗？
var button = document.querySelector('.button');
var rocket = document.querySelector('.rocket');
var x = rocket.offsetTop;
var a = 1;
function launch() {
while (a < 1000) {
console.log(x);
console.log(a);
console.log(rocket.style.top);
rocket.style.top = x - a + 'px';
a += a;
sleep(1000);
}
}
function sleep(milliseconds) {
var start = new Date().getTime();
for (var i = 0; i < 1e7; i++) {
if ((new Date().getTime() - start) > milliseconds) {
break;
}
}
}
button.addEventListener('click', launch);div.button {
font-family: impact;
letter-spacing: 1px;
text-transform: uppercase;
margin: auto;
text-align: center;
background-color: rgba(255, 0, 0, 1);
border-style: solid;
border-width: 1px;
border-radius: 100px;
width: 75px;
height: 25px;
padding: 25px 0;
cursor: pointer;
}
div.rocket {
position: absolute;
background-color: rgba(0, 0, 0, .5);
width: 25px;
height: 25px;
bottom: 0%;
left: 5%;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class='button'>launch</div>
<div class='rocket'></div>
</body>
</html>最佳答案
您可以使用 jquery 完成此操作:
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
$('.button').click(async function() {
var a = 0;
var x = 10;
while (a < 50) {
var upd = String(x-a) + 'px';
$('.rocket').css("margin-bottom", upd);
a += -x;
await sleep(50);
}
});div.button {
font-family: impact;
letter-spacing: 1px;
text-transform: uppercase;
margin: auto;
text-align: center;
background-color: rgba(255, 0, 0, 1);
border-style: solid;
border-width: 1px;
border-radius: 100px;
width: 75px;
height: 25px;
padding: 25px 0;
cursor: pointer;
}
div.rocket {
position: absolute;
background-color: rgba(0, 0, 0, .5);
width: 25px;
height: 25px;
bottom: 0%;
left: 5%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class='button'>launch</div>
<div class='rocket'></div>
</body>
</html>关于JavaScript 动画动态返回元素上的位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48155898/