Javascript警告框在执行前一个语句之前显示

Javascript alert box shows up before executing previous statement

本文关键字：一个 语句 显示 警告 执行 Javascript      更新时间：2023-09-26

我遇到了一个奇怪的问题，但这并不奇怪，因为我是一个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函数调用的警报。这可能是一个相当古怪的问题，但我有点困惑。所以你们能提供的任何帮助都会非常感激。谢谢。

编辑:它实际上在电脑浏览器中运行正常。然而，这个问题发生在手机或平板电脑等移动设备上。这可能是我做错的地方。如有任何帮助，不胜感激。

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

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

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

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

下面是一个简单的例子:

jQuery(function($) {
  $.when($('#empty-me').html('')).done(function() {
    alert('I did it!');
  });
});

"。/cardImages/default.png"

我不确定…但是试试"../cardImages/default.png"…我总是用两个点来表示更高的层次

相关文章：