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

2019-07-03 20:24:06 阅读：126 来源： 互联网

我有一个奇怪的问题,但这并不奇怪,因为我是一个JavaScript新手.基本上我正在创造一个简单的高低牌纸牌游戏. (抽两张牌,最高牌获胜).无论如何,代码如下.

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

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

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中的元素不会立即显示更改,而是触发事件以重绘元素.当您的功能运行完毕后,浏览器将处理任何待处理事件并显示更改.

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

标签：jquery,javascript,jquery-mobile
来源： https://codeday.me/bug/20190703/1370251.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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