在执行上一条语句之前显示 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 是黑桃 A，数字 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 + '
' + result1 + '
' + 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屋！