执行上一个语句之前会显示Javascript警告框 [英] Javascript alert box shows up before executing previous statement

问题描述

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

I am having a strange issue, but it is not surprising as I am a bit of a JavaScript newbie. Basically I am creating a simple high-low card game. (Draw two cards, highest card wins). Anyways, the code is below.

程序的基本流程非常简单。我选择2个随机数（1-52）。这些号码映射到相应的卡。 （即，数字1是黑桃的王牌，37号是俱乐部的杰克等）。无论如何，在绘制卡片后，程序将显示相应的卡片并确定获胜者。在所有这一切结束时，我有一个警报，并告诉胜利者抽奖，并询问用户是否想再次播放。

The basic flow of the program is pretty simple. I choose 2 random numbers (1-52). These numbers are mapped to a corresponding card. (i.e. number 1 is the ace of spades, number 37 is the jack of clubs, etc.). Anyways, after drawing the cards, the program is to display the corresponding card and determine the winner. At the end of all of this, i have an alert that comes up and and tells the winner of the draw and asks if the user wants to play again.

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

The problem I am having is this: Even though the program should have already displayed the image of the card and output the results to a text area, the alert box shows up before any of that actually occurs and never displays the cards or the results. Any ideas? I am posting all of the code so far and any help would be appreciated. Thanks in advance.

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函数调用的警报。这可能是一个相当愚蠢的问题，但我有点困惑。所以，你们提供的任何帮助都将非常感激。谢谢。

So I did not place the code in here for the display card function, just because for testing it is exceptionally long. It is just a giant switch case for all 52 random numbers. The finished product will actually be pulling from an XML file, but I used this just for testing purposes. (If, for some reason, you need to see the display cards function, let me know and I can post it.) Anyway, to recap, the last call made in the drawCards() function is the playAgain function. Upon running this code the results nor the card images are displayed. It just jumps straight to the alert that is called for by the playAgain function. This is probably a pretty noobish question, but I am a little perplexed by it. So any help you guys can offer would be GREATLY appreciated. Thanks.

推荐答案

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

Changes in the browser doesn't show up as long as your Javascript code is running.

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

The browser is event driven, so changing an element in the DOM doesn't show the change immediately, instead an event is triggered to redraw the element. When your function has finished running, the browser will handle any pending events and show the changes.

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

So, when building an application, you have to use the same approach so that the browser has a chance to show the changes.

这篇关于执行上一个语句之前会显示Javascript警告框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！