Question

我正在尝试用Javascript创建一个简单的2-D游戏。我将使用jQuery来做一些动画。

玩家将使用按钮来调用各种功能（向上/向下/向左/向右移动，攻击，防御等）。

一个movement（）函数将调用辅助函数animateCharacter（）来处理屏幕上图像对象的移动。

我遇到的问题是move（）函数中的下一个命令在animateCharacter（）函数完成之前执行。

我尝试添加回调函数，但这并没有解决问题。我尝试了很多其他的东西--setInterval，setTimeout，.delay等。似乎没有什么能解决这个问题。我不做什么，或者我做错了什么？

以下是问题的简化示例....

我期待发生的是用户点击[Move the Block]，黄色脸部的图像向右移动一点;然后mainContainer变成“你好”，然后变成“再见”。
但接下来发生的事情是：用户点击[Move the Block]，mainContainer立即说“再见”，然后动画永远不可见，但是当动画结束时，mainContainer变成“hello”。
如果我注释掉最后一个命令，则会看到动画，并且mainContainer变为“hello”，如预期的那样;但后来我没有完成最后一行代码。

<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

试试这个。

将document.getElementById("mainContainer").innerHTML = "goodbye";移动到setTimeout函数，该函数将在div中打印Hello后执行。

您的代码执行方式如下：

以1500毫秒为动画显示框 - 动画启动
将主要内容更改为goodBye而不等待动画完成 - 动画开始后
动画已完成，因此将内容更改为Hello - 动画完成，但用户从未看过它。

＆＃13;

// 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
		
	}

＆＃13;

<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>

＆＃13;

Answer 2

您的代码会执行此时所说的内容。你需要在显示再见之前引入延迟。

// 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/

说明：

我还使用了jQuery替代方法来缩短代码。
我将您的内联onclick处理程序移动到jQuery等效项，因为它更容易维护。

Answer 3

你不能直接把你的“再见”消息放在#myContainer中，因为这会破坏#myObject。添加另一个div来保存消息：

HTML：

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

CSS：

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

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";
}

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

Answer 4

尝试

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 个答案:

说明：