Javascript在执行下一个命令之前不会等待JQuery动画完成

Question

I'm trying to create a simple 2-D game in Javascript. 我正在尝试用Javascript创建一个简单的2D游戏。 I'm going to use jQuery to do some animations. 我将使用jQuery制作一些动画。

There will be buttons that a player will use to call various functions (Move up/down/left/right, Attack, Defend, etc). 玩家将使用按钮来调用各种功能（上/下/左/右移动，攻击，防御等）。

A movement() function will call a secondary function, animateCharacter(), to handle the movement of an image object on screen. Movement（）函数将调用辅助函数animateCharacter（）来处理图像对象在屏幕上的移动。

The problem I'm having is that the next command in the movement() function executes before the animateCharacter() function has finished. 我遇到的问题是在animateCharacter（）函数完成之前，先执行了Movement（）函数中的下一个命令。

I tried to add a callback function, but that didn't fix the situation. 我试图添加一个回调函数，但是并不能解决这种情况。 I've tried many other things -- setInterval, setTimeout, .delay, etc. Nothing seems to fix this situation. 我尝试了许多其他操作-setInterval，setTimeout，.delay等。似乎没有任何方法可以解决这种情况。 What am I not doing, or what am I doing wrong? 我在做什么，或者我在做什么错？

Here's a simplified example of the problem.... 这是问题的简化示例。

What I'm expecting to happen is the user hits [Move the Block], the image of a yellow face moves a bit to the right; 我希望发生的事情是用户点击了[Move the Block]，黄色面孔的图像向右移动了一点； then the mainContainer turns into "hello", and then turns into "goodbye." 然后mainContainer变成“ hello”，然后变成“再见”。
But what happens instead is: The user hits [Move the Block], the mainContainer immediate says "goodbye", then the animation is never visible, but when the animation finishes, the mainContainer turns into "hello." 但是发生的却是：用户单击[Move the Block]，mainContainer立即说“再见”，则动画永远不可见，但是当动画结束时，mainContainer变成“ hello”。
If I comment out the final command, the animation is seen and the mainContainer turns into "hello," as expected; 如果我注释掉最后一条命令，则会看到动画，并且mainContainer会按预期方式变为“ hello”。 but then I don't get to do the that final line of code. 但是后来我没做最后的代码行。

 <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <style> #mainContainer { border: 1px solid gray; width:100px; height:100px; position: relative; } #myObject { border: 1px solid gray; width: 30px; height: 30px; color:blue; text-align:center; background-color:yellow; position:relative; } </style> </head> <body> <div id="mainContainer"> <div id="myObject">:c)</div> </div> <script> // MOVE THE BLOCK TO THE RIGHT function animateCharacter(callbackSent) { $("#myObject").animate({left: "+=50"},1500, function () { callbackSent();}); } // DO THIS WHEN THE BUTTON IS PUSHED function doTask() { myCallback = function () { document.getElementById("mainContainer").innerHTML = "hello"; }; animateCharacter(myCallback); // WORKS FINE IF THIS IS COMMENTED OUT, // BUT I WANT MORE CODE TO EXECUTE document.getElementById("mainContainer").innerHTML = "goodbye"; } </script> <button id="pushMe" onclick="doTask();">Move the Block</button> </body> </html>

Answer 1

Try This. 尝试这个。

Moved document.getElementById("mainContainer").innerHTML = "goodbye"; 已移动document.getElementById("mainContainer").innerHTML = "goodbye"; to the setTimeout function, that will execute after Hello is printed in the div. 到setTimeout函数，它将在div中打印Hello后执行。

Your code was executing like: 您的代码执行如下：

Animate the box with 1500 miliseconds - Animation starts 以1500毫秒的时间对盒子进行动画处理 - 动画开始
Change main content to goodBye without waiting for animation completion - Right after animation start 在不等待动画完成的情况下将主要内容更改为goodBye- 动画开始后立即
Animation got Completed, so change content to Hello - Animation Completes, though the user never saw it. 动画已完成，因此将内容更改为“您好- 动画已完成”，尽管用户从未看到过。

 // MOVE THE BLOCK TO THE RIGHT function animateCharacter(callbackSent) { $("#myObject").animate({left: "+=50"},1500, callbackSent); } // DO THIS WHEN THE BUTTON IS PUSHED function doTask() { myCallback = function () { document.getElementById("mainContainer").innerHTML = "hello"; setTimeout(function(){document.getElementById("mainContainer").innerHTML = "goodbye"; },1000); }; animateCharacter(myCallback); // WORKS FINE IF THIS IS COMMENTED OUT, // BUT I WANT MORE CODE TO EXECUTE }

 <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <style> #mainContainer { border: 1px solid gray; width:100px; height:100px; position: relative; } #myObject { border: 1px solid gray; width: 30px; height: 30px; color:blue; text-align:center; background-color:yellow; position:relative; } </style> </head> <body> <div id="mainContainer"> <div id="myObject">:c)</div> </div> <button id="pushMe" onclick="doTask();">Move the Block</button> </body> </html>

Answer 2

Your code does what it is told at the moment. 您的代码会执行目前的指示。 You need to introduce a delay before showing goodbye. 您需要稍稍延迟才能告别。

// MOVE THE BLOCK TO THE RIGHT
function animateCharacter(callbackSent) {
    $("#myObject").animate({
        left: "+=50"
    }, 1500, callbackSent);
}

// DO THIS WHEN THE BUTTON IS PUSHED
function doTask() {
    animateCharacter(function () {
        $("#mainContainer").html("hello");
        setTimeout(function () {
            $("#mainContainer").html("Goodbye");
        }, 3000);
    });
}

$('#pushMe').click(doTask);

JSFiddle: http://jsfiddle.net/TrueBlueAussie/7tucg2s5/1/ JSFiddle： http : //jsfiddle.net/TrueBlueAussie/7tucg2s5/1/

Notes: 笔记：

I also used jQuery alternatives to shorten the code. 我还使用jQuery替代方法来缩短代码。
I moved your inline onclick handler to the jQuery equivalent as that is easier to maintain. 我将您的内联onclick处理程序移至jQuery等效项，因为它更易于维护。

Answer 3

You can't put your "goodbye" message directly in #myContainer because this will destroy #myObject. 您不能将“再见”消息直接放入#myContainer中，因为这会破坏#myObject。 Add another div to hold the message: 添加另一个div来保存消息：

HTML: HTML：

<div id="mainContainer">
    <div id="myObject">:c)</div>
    <div id="myText"></div>
</div>

CSS: CSS：

#myText {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

JavaScript: JavaScript的：

function doTask() {
    myCallback = function () { document.getElementById("mainContainer").innerHTML = "hello"; };
    animateCharacter(myCallback);
    // WORKS FINE IF THIS IS COMMENTED OUT, 
    // BUT I WANT MORE CODE TO EXECUTE
    document.getElementById("myText").innerHTML = "goodbye";
}

Fiddle here: http://jsfiddle.net/robbyn/0qkt0v5r/ 在这里提琴： http : //jsfiddle.net/robbyn/0qkt0v5r/

Answer 4

Try 尝试

 function animateCharacter() { return $("#myObject").animate({ left: "+=50" }, 1500, function() { $(this) .fadeOut(500) .parent() .html("<span>hello</span>") .find("span") .delay(1500, "fx") .fadeOut(250, function() { $(this).html("Goodbye").fadeIn(250) }) }) } $("#pushMe").on("click", function() { animateCharacter() });

 <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> <style> #mainContainer { border: 1px solid gray; width: 100px; height: 100px; position: relative; } #myObject { border: 1px solid gray; width: 30px; height: 30px; color: blue; text-align: center; background-color: yellow; position: relative; } </style> </head> <body> <div id="mainContainer"> <div id="myObject">:c)</div> </div> <button id="pushMe">Move the Block</button> </body> </html>

Javascript在执行下一个命令之前不会等待JQuery动画完成

问题描述

4 个解决方案

解决方案1
1 已采纳 2015-04-23 10:44:50

解决方案2
1 2015-04-23 10:45:27

Notes: 笔记：

解决方案3
0 2015-04-23 11:08:10

解决方案4
0 2015-04-23 12:12:54

Javascript在执行下一个命令之前不会等待JQuery动画完成

问题描述

4 个解决方案

解决方案1 1 已采纳 2015-04-23 10:44:50

解决方案2 1 2015-04-23 10:45:27

Notes: 笔记：

解决方案3 0 2015-04-23 11:08:10

解决方案4 0 2015-04-23 12:12:54

解决方案1
1 已采纳 2015-04-23 10:44:50

解决方案2
1 2015-04-23 10:45:27

解决方案3
0 2015-04-23 11:08:10

解决方案4
0 2015-04-23 12:12:54