如何用JQuery多次生成不同随机数并追加展示不同结果

问题根因 #

原代码仅在全局生成1次随机数组，后续5次循环渲染的都是同一个数组的内容，所以所有列表输出完全一致。

修复方案 #

把随机数组生成逻辑放入5次循环的内部，每次循环都重新生成一组新的随机数再插入页面。如果需要同时满足每组内的6个数字互不重复，还需要额外加去重判断，修复后代码如下：

$('#randomFive').click(function(){
    var randTime = 5;
    var numberRandom = 6;
    // 每次生成一组新的随机数的封装函数
    function generateRandomArr() {
        var arr = [];
        while(arr.length < numberRandom) {
            var randNum = Math.floor((Math.random() * 40) + 1);
            // 去重判断，保证组内没有重复数字
            if(arr.indexOf(randNum) === -1) {
                arr.push(randNum);
            }
        }
        return arr;
    }
    // 循环5次，每次生成新数组再插入
    for(var i = 0; i < randTime; i++) {
        var arrNum = generateRandomArr();
        $(".calculate-result ul").append(`<li>${arrNum.join('+')}</li>`);
    }
});

补充说明 #

如果不需要组内数字去重，把generateRandomArr里的去重判断去掉，换成原来的for循环生成逻辑即可。

内容的提问来源于stack exchange，提问作者user15475623