在其他计算函数发生之前，您如何等待函数运行其所有代码(包括动画)?JavaScript 和 JQuery

Question

我正在尝试在网络上制作石头剪刀布游戏。

一切正常，只是我希望两只手的动画在将图片更改为正确的值之前上下移动 3 次。

但相反，它会保持持续并执行按钮输入的下一个代码。

$(".adjust-button").click(function(){
const npc = getNpcChoice(3);
const player = $(this).val();
animateShake().promise().done(checkResults);
});
function animateShake(){
let timer = $.Deferred();
$("img").animate({paddingTop: "0px", paddingBottom: "100px"},300);
$("img").animate({paddingTop: "50px", paddingBottom: "50px"},300);
$("img").animate({paddingTop: "0px", paddingBottom: "100px"},300);
$("img").animate({paddingTop: "50px", paddingBottom: "50px"},300);
$("img").animate({paddingTop: "0px", paddingBottom: "100px"},300);
$("img").animate({paddingTop: "50px", paddingBottom: "50px"},300);

return timer.resolve();
}
function checkResults(playe, np){
// $leftSign.attr("src", (`/images/${player}-from-left.png`));
// $rightSign.attr("src", (`/images/${npc}-from-right.png`));
$leftSign.attr("src", (`/images/rock-from-left.png`));
$rightSign.attr("src", (`/images/paper-from-right.png`));
let player = "rock";
let npc = "paper";
}

我希望方法animateShake()在下一个方法checkResults(playe，np)运行之前完全运行其所有动画。

为了测试，我更改了最后一个函数的参数，只是在动画之前检查图片是否发生了变化......

我还需要能够将参数传递给最后一种方法。

我已经尝试了该方法解决并完成了，但无法按照我想要的方式工作。

我为此使用jQuery。

Answer 1

当您对同一元素执行animate()调用时，您可以简单地从animateShake()函数返回该函数，并使用它在排队动画完成后解析承诺时返回的promise()调用checkResults()。试试这个：

$(".adjust-button").click(function() {
animateShake().promise().done(checkResults);
});
function animateShake() {
return $("img") 
.animate({ paddingTop: "0px", paddingBottom: "100px" }, 300)
.animate({ paddingTop: "50px", paddingBottom: "50px" }, 300)
.animate({ paddingTop: "0px", paddingBottom: "100px" }, 300)
.animate({ paddingTop: "50px", paddingBottom: "50px" }, 300)
.animate({ paddingTop: "0px", paddingBottom: "100px" }, 300)
.animate({ paddingTop: "50px", paddingBottom: "50px" }, 300);
}
function checkResults() {
console.log('all done');
}

img {   
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid #C00;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="adjust-button">Adjust</button>
<img />