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

Question

这个 fiddle 演示了我的问题:https://jsfiddle.net/petebere/fhg84je2/

我想确保每次用户单击按钮时都会显示数组中的随机元素。问题是，有时进行新的混洗时，新混洗的数组中的第一个元素与先前混洗的数组中的最后一个元素相同。在这些情况下，当用户单击按钮时，会显示相同的元素。然后，用户必须再次单击该按钮(或多次)才能显示不同的元素。我想避免这种情况。

我尝试引入 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 建议的两种不同解决方案解决了我的问题。

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

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

两种解决方案都可以完美运行，但我首选的解决方案是第二个，因为我发现它更容易理解。

Answer 1

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

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

查看更新jsfiddle