防止随机数连续显示两次答案

【问题标题】：Preventing random numbers from showing twice in a row防止随机数连续显示两次
【发布时间】：2014-05-08 08:12:35
【问题描述】：

在jQuery中如何防止随机数使图像连续显示两次？

fadeOut 和fadeIn 共有三个数组。

jQuery代码和html代码如下：

<script type="text/javascript">
jQuery(

    function(){
        var cardTitle = new Array();
            cardTitle[0] = "You've picked Judgment...";
            cardTitle[1] = "You've picked the Magician...";
            cardTitle[2] = "You've picked Strength...";
            cardTitle[3] = "You've picked the High Priestess...";
            cardTitle[4] = "You've picked the World...";

        var cardDesc = new Array();
            cardDesc[0] = "Judgment tells...";
            cardDesc[1] = "The Magician generally...";
            cardDesc[2] = "Strength is the rawest...";
            cardDesc[3] = "Your identification...";
            cardDesc[4] = "The World is...";

        var drawCard = new Array();
            drawCard[0] = "judgement.jpg"; 
            drawCard[1] = "magician.jpg"; 
            drawCard[2] = "strength.jpg"; 
            drawCard[3] = "theHighPriestess.jpg"; 
            drawCard[4] = "theWorld.jpg";

    $("#myBtn").click(

        function(){


            var drawNum = Math.floor(Math.random() * cardTitle.length);


            $("h3").fadeOut(
                function(){
                    $("#newTitle").html(cardTitle[drawNum]).fadeIn();
                }); 

            $("p").fadeOut(
                function(){
                    $("#newDesc").html(cardDesc[drawNum]).fadeIn();
                });         

            $("img").fadeOut(
                function(){
                    $("#showImage").attr('src', 'images/' + drawCard[drawNum]).fadeIn();
                });


            } //end click function
    ); //end click

}); //end jQuery container
</script>




<body>
  <img src="images/drawCard.jpg" id="showImage">
  <input type = "button" id="myBtn" value="Click Here to Pick a Card" />
  <h3 id="newTitle">Welcome to Madam Athena's Tarot Card Reading</h3>
  <p id="newDesc">Free your mind...</p>
</body>

【问题讨论】：

It must be done in jQuery and not JavaScript. jQuery 是 JavaScript。如果你是在 jQuery 中做的，那么你就是在 JavaScript 中做的。
如果你想以随机顺序显示每一个事物的列表，你想使用 shuffle 算法。 Fisher-Yates shuffle 算法就是一个很好的例子。

标签： jquery math random numbers

【解决方案1】：

如果您不想连续显示两次随机数，请声明一个全局变量并保存最近的随机数。

比较新的随机数和最近的随机数，如果相等，重新计算随机数

例如

var previousRandomNumber = 0; // this should be outside of click function and be global to access

do {
drawNum = Math.floor(Math.random() * cardTitle.length);
}while (drawNum == previousRandomNumber)

previousRandomNumber =  drawNum ;

要记住的另一件重要事情是 javascript 不会等到 do while 完成

所以你应该将你的洗牌逻辑分开在一个单独的函数中，并在里面调用 do while。

完整的工作示例：http://jsfiddle.net/k4QH4/1/

var cardTitle = new Array();
            cardTitle[0] = "You've picked Judgment...";
            cardTitle[1] = "You've picked the Magician...";
            cardTitle[2] = "You've picked Strength...";
            cardTitle[3] = "You've picked the High Priestess...";
            cardTitle[4] = "You've picked the World...";

        var cardDesc = new Array();
            cardDesc[0] = "Judgment tells...";
            cardDesc[1] = "The Magician generally...";
            cardDesc[2] = "Strength is the rawest...";
            cardDesc[3] = "Your identification...";
            cardDesc[4] = "The World is...";

        var drawCard = new Array();
            drawCard[0] = "judgement.jpg"; 
            drawCard[1] = "magician.jpg"; 
            drawCard[2] = "strength.jpg"; 
            drawCard[3] = "theHighPriestess.jpg"; 
            drawCard[4] = "theWorld.jpg";
var previousRandomNumber = 0;

$("#myBtn").click(

        function(){


            var drawNum;

            do {
            drawNum = Math.floor(Math.random() * cardTitle.length);
                if(drawNum != previousRandomNumber){
                shuffle(drawNum);
                }
            }while (drawNum == previousRandomNumber)


            previousRandomNumber =  drawNum ;

            } //end click function
    ); //end click


function shuffle(drawNum) {

$("h3").fadeOut(
                function(){
                    $("#newTitle").html(cardTitle[drawNum]).fadeIn();
                }); 

            $("p").fadeOut(
                function(){
                    $("#newDesc").html(cardDesc[drawNum]).fadeIn();
                });         

            $("img").fadeOut(
                function(){
                    $("#showImage").attr('src', 'images/' + drawCard[drawNum]).fadeIn();
                });
}

如果您还有其他问题，请告诉我

[根据评论请求的更改]

var cardTitle = new Array();
            cardTitle[0] = "You've picked Judgment...";
            cardTitle[1] = "You've picked the Magician...";
            cardTitle[2] = "You've picked Strength...";
            cardTitle[3] = "You've picked the High Priestess...";
            cardTitle[4] = "You've picked the World...";

        var cardDesc = new Array();
            cardDesc[0] = "Judgment tells...";
            cardDesc[1] = "The Magician generally...";
            cardDesc[2] = "Strength is the rawest...";
            cardDesc[3] = "Your identification...";
            cardDesc[4] = "The World is...";

        var drawCard = new Array();
            drawCard[0] = "judgement.jpg"; 
            drawCard[1] = "magician.jpg"; 
            drawCard[2] = "strength.jpg"; 
            drawCard[3] = "theHighPriestess.jpg"; 
            drawCard[4] = "theWorld.jpg";
var previousRandomNumber = 0;

$("#myBtn").click(

        function(){


            var drawNum;

            do {
            drawNum = Math.floor(Math.random() * cardTitle.length);
                if(drawNum != previousRandomNumber){
                   $("h3").fadeOut(
                    function(){
                    $("#newTitle").html(cardTitle[drawNum]).fadeIn();
                   }); 

                  $("p").fadeOut(
                   function(){
                    $("#newDesc").html(cardDesc[drawNum]).fadeIn();
                  });         

                  $("img").fadeOut(
                   function(){
                    $("#showImage").attr('src', 'images/' + drawCard[drawNum]).fadeIn();
                  });
                }

            }while (drawNum == previousRandomNumber)

           previousRandomNumber =  drawNum ;




            } //end click function
    ); //end click

【讨论】：

只是出于好奇，但它可以在没有插件的情况下完成。不使用随机播放是吗？
请理解 shuffle 不是插件，它是你的功能和你的代码，我只是将它分开并称之为 shuffle。将子任务作为功能分开总是好的。但回答你的问题，是的，我们也可以在没有函数的情况下做到这一点，但有点复杂。
我编辑了发布和删除的随机播放功能。很酷吗？
哦，我现在明白了。我喜欢！感谢您的帮助！
没问题，如果他们按下按钮太快，有时会重复。为此，您可以添加标志，直到第一个请求被处理（或）禁用单击按钮，直到它完成。我建议您首先学习 javascript 基础知识，这将非常有帮助。如果您需要任何帮助，请告诉我。