5

我遇到了一个奇怪的问题，但这并不奇怪，因为我是一个 JavaScript 新手。基本上我正在创建一个简单的高低纸牌游戏。（抽两张牌，最高牌获胜）。无论如何，代码如下。

该程序的基本流程非常简单。我选择 2 个随机数 (1-52)。这些数字映射到相应的卡。（即数字 1 是黑桃 A，数字 37 是梅花 J 等）。无论如何，抽完牌后，程序就是显示相应的牌并确定获胜者。在所有这一切结束时，我会出现一个警报，并告诉平局的获胜者并询问用户是否想再次玩。

我遇到的问题是：即使程序应该已经显示了卡片的图像并将结果输出到文本区域，但警报框会在任何实际发生之前出现，并且从不显示卡片或结果。有任何想法吗？到目前为止，我正在发布所有代码，我们将不胜感激。提前致谢。

function drawCards() {
    var oppCard = randNumber();
    var customerCard = randNumber();

    while (oppCard == customerCard) {
        customerCard = randNumber();
    }
    var oppCardName = displayCard(oppCard, "oppImage");
    var customerCardName = displayCard(customerCard, "custImage");

    var result2 = "Your card was: " + customerCardName;
    var result1 = "The opponent's card was: " + oppCardName;

    var result3 = determineWinner(oppCard, customerCard);
    var result4 = result3 + '\n' + result1 + '\n' + result2;
    $("#textareaRes").text(result4);

    playAgain(result3);
}

function determineWinner(oppsCard, customersCard) {
    var oppValue = oppsCard % 13;
    var customerValue = oppsCard % 13;

    var winnerString = "";
    if (oppValue == 0) {
        oppValue = 13;
    }
    if (customerValue == 0) {
        customerValue = 13;
    }
    if (oppValue == customerValue) {
        winnerString = "You Tied.";
    }
    else if (oppValue > customerValue) {
        winnerString = "You Lose.";
    }
    else if (oppValue < customerValue) {
        winnerString = "You Win!!";
    }
    return winnerString;
}

function randNumber() {
    var min = 1;
    var max = 52;
    var random = Math.floor(Math.random() * (max - min + 1)) + min;
    return random;
}

function playAgain(resultString) {
    if (resultString == "You Lose." || resultString == "You Win!!") {
        alert(resultString);
        var conf = confirm("Play Again?");
        if (conf == true) {
            $("#textareaRes").text("");
            document.getElementById("custImage").src="./cardImages/default.png";
            document.getElementById("oppImage").src="./cardImages/default.png";
        }
        else {
            window.location = "#mainMenuPage";
        }
    }
    else {
        alert(resultString);
        alert("Try Again.");
        $("#textareaRes").text("");
        document.getElementById("custImage").src="./cardImages/default.png";
        document.getElementById("oppImage").src="./cardImages/default.png";
    }
}

所以我没有把显卡功能的代码放在这里，只是因为测试它特别长。它只是一个适用于所有 52 个随机数的巨型开关盒。最终产品实际上是从 XML 文件中提取的，但我只是将其用于测试目的。（如果由于某种原因，您需要查看显示卡函数，请告诉我，我可以发布它。）总之，回顾一下，在 drawCards() 函数中进行的最后一次调用是 playAgain 函数。运行此代码后，将显示结果和卡片图像。它只是直接跳转到 playAgain 函数调用的警报。这可能是一个非常愚蠢的问题，但我对此感到有些困惑。因此，你们可以提供的任何帮助将不胜感激。谢谢。

编辑：它实际上在计算机的浏览器中正确执行。但是，问题发生在手机或平板电脑等移动设备上。所以这可能是我在这里做错的事情。任何帮助是极大的赞赏。

4

3 回答 3

5

只要您的 Javascript 代码正在运行，浏览器中的更改就不会显示出来。

浏览器是事件驱动的，因此更改 DOM 中的元素不会立即显示更改，而是会触发一个事件来重绘元素。当您的函数完成运行后，浏览器将处理所有未决事件并显示更改。

因此，在构建应用程序时，您必须使用相同的方法，以便浏览器有机会显示更改。

于 2013-04-18T12:11:11.223 回答
0

对于发现此问题并寻找解决方案的任何人，可以在此答案中找到解决方案：https ://stackoverflow.com/a/13338585/870729

这是一个简单示例的工作小提琴：

jQuery(function($) {
  $.when($('#empty-me').html('')).done(function() {
    alert('I did it!');
  });
});
于 2017-12-29T15:10:51.617 回答
-1

“./cardImages/default.png”

我不确定...但是尝试“../cardImages/default.png”...我总是使用2个点来达到更高的水平

于 2013-04-18T12:22:05.660 回答