Question

这个小提琴演示了我的问题：https://jsfiddle.net/petebere/fhg84je2/

我想确保每次用户点击按钮时，都会显示数组中的随机元素。问题在于，有时当执行新的shuffle时，新洗牌的数组中的第一个元素与先前洗牌的数组中的最后一个元素相同。在用户单击按钮的这些情况下，将显示相同的元素。用户必须再次单击该按钮（或多次）以显示不同的元素。我想避免这种情况。

如果第一个元素等于最后一个元素，我尝试再次引入if语句，但这似乎不起作用。

非常感谢您的帮助。

HTML代码：

    <div id="container">
        <button id="clickHere">Click here to pick a random element from the array</button>
        <div id="resultDiv"></div>
    </div><!-- container -->

JavaScript代码：

/* define the array with a list of elements */
var arrayList = [
"1st element in array</br>",
"2nd element in array</br>",
"3rd element in array</br>",
];

/* define the function to shuffle the array */
function shuffleArray() {
for (var i = arrayList.length - 1; i > 0; i--) {
    var j = Math.floor(Math.random() * (i + 1));
    var temp = arrayList[i];
    arrayList[i] = arrayList[j];
    arrayList[j] = temp;
}
}

/* execute the shuffleArray function */
shuffleArray();

/* button event initiating the randomiser function */
document.getElementById('clickHere').onclick = function () {
    randomiser ();
}

/* populate the resultDiv for the first time */
document.getElementById('resultDiv').innerHTML = arrayList[0];

/* define the array index value for the first click */
var arrayIndex = 1;

/* define the main function */
function randomiser () {
    document.getElementById('resultDiv').innerHTML = arrayList[arrayIndex];
    arrayIndex = (arrayIndex+1);
    if (arrayIndex>arrayList.length-1) {
        arrayIndex = 0;
        var lastArrayElement = arrayList[arrayList.length-1]
        shuffleArray();
        var firstArrayElement = arrayList[0];
        if (firstArrayElement == lastArrayElement) {
            shuffleArray();
        }
    }
}

编辑1：

1）SpiderPig和2）Jonas-Äppelgran建议的两种不同解决方案解决了我的问题。

这是第一个使用push和shift方法组合的解决方案的更新小提琴：https://jsfiddle.net/petebere/axatv0wg/

这是使用while循环而不是if语句的第二个解决方案的更新小提琴：https://jsfiddle.net/fhg84je2/2/

两种解决方案都能很好地工作，但我的首选解决方案是第二种，因为我觉得它更容易理解。

Answer 1

您只需要对代码进行一些小改动。

而不是

if (firstArrayElement == lastArrayElement) {
  shuffleArray();
}

试试这个

if (firstArrayElement == lastArrayElement) {
  arrayList.push(arrayList.shift());
}

Answer 2

在查看随机生成的字符串是否与上次相同时，执行while而不是if检查。

Psuedocode：while (old == new) { randomize(); }这不会停止循环/随机化，直到旧的不是新的。

查看更新的jsfiddle

确保JavaScript中shuffle之后的第一个元素与上一个shuffle中的最后一个元素不同

2 个答案: