在执行前面的语句之前显示Javascript警告框

我遇到了一个奇怪的问题，但这并不奇怪，因为我是一位JavaScript新手。基本上我正在创建一个简单的高低卡牌游戏。（抽两张牌，最高牌赢）。无论如何，代码如下。在执行前面的语句之前显示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函数要求的警报。这可能是一个很不错的问题，但我有点困惑。所以任何帮助你们可以提供将非常感激。谢谢。

[编辑：它实际上在计算机的浏览器中正确执行。但是，问题发生在像手机或平板电脑这样的移动设备上。所以这可能是我在这里做错了。任何帮助非常感谢。]

来源

2013-04-18 jwebster

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

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

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

来源

2013-04-18 12:11:11 Guffa

这很有道理。 Noob错误，我想。这是我写过的第一个Web应用程序，所以有一点学习曲线。感谢您及时的回复。我将尝试重新设计这一点，以使其正常工作。 – jwebster

那么有没有办法在DOM更改后显示警报？ – jbyrd

“./cardImages/default.png”

林不知道......但尝试“../cardImages/default.png” ......我总是用2个点进行到了一个更高水平

来源

2013-04-18 12:22:05 Michel

这不是问题。它工作得很好。 '。'实际上是指当前目录。 '..'表示较高的目录。 – jwebster

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

下面是一个简单的例子的working fiddle：

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

来源

2017-12-29 15:10:51

在执行前面的语句之前显示Javascript警告框

回答

相关问题