Показывать 3 случайных цвета раз в 4 секунды с jQuery

Question

У меня есть этот код, и я пытаюсь показать 3 случайных цвета из массива, сразу , каждые 4 секунды, но вместо этого я получаю 1 цвет каждые 4 секунды, даже если они правильно рандомизированы ...

Чего мне не хватает?

//set colors
var colors = ["white", "red", "blue", "yellow", "orange", "brown", "black", "violet", "purple", "pink", "green"];

//pick 3 of them randomly
var three_random_colors = (n) => {
    return colors.reduce((memo, val, index) => {
        var p = (n-memo.length); // How many remaining to choose.
        var q = colors.length-index; // How many remaining to choose from.
        if (Math.random() < p/q){
            memo.push(val);
        }
        return memo;
    }, []);
};

//output the colors on the HTML
var counter = 0; //start counter
var elem = document.getElementById("changeText");//the place where we change things
setInterval(change, 4000);//every 4 seconds run the following stuff:
function change() {
 var text = three_random_colors(3);//get what's inside "three_random_colors"
 elem.innerHTML = text[counter];//on div, add content <--- (I want 3 at once here! but I get only 1)
    counter++;
    if(counter >= text.length) { counter = 0; var text = three_random_colors(3); }//reset
}

Answer 1

Ваша проблема в том, что ваша функция change выводит только один цвет за раз. Вы можете упростить его для вывода (например)

text.join(' ')

, и вы увидите все три цвета:

//set colors
var colors = ["white", "red", "blue", "yellow", "orange", "brown", "black", "violet", "purple", "pink", "green"];

//pick 3 of them randomly
var three_random_colors = (n) => {
  return colors.reduce((memo, val, index) => {
    var p = (n - memo.length); // How many remaining to choose.
    var q = colors.length - index; // How many remaining to choose from.
    if (Math.random() < p / q) {
      memo.push(val);
    }
    return memo;
  }, []);
};

//output the colors on the HTML
var elem = document.getElementById("changeText"); //the place where we change things
setInterval(change, 4000); //every 4 seconds run the following stuff:
function change() {
  var text = three_random_colors(3); //get what's inside "three_random_colors"
  elem.innerHTML = text.join(' '); //on div, add content <--- (I want 3 at once here! but I get only 1)
}

<div id="changeText"></div>

Answer 2

Вы можете сделать это довольно просто с помощью rando js .com , и этот код будет выполняться сразу после первого запуска, а затем каждые четыре секунды и никогда не будет повторять один и тот же цвет больше, чем один раз в том же трехцветном наборе. Все, что я делаю, это создаю перетасованный массив цветов, используя функцию rando js randoSequence, slice первые три значения из этого массива, map их к их необработанным значениям с помощью .value (поскольку rando js фактически возвращает массив объектов в случае, если вам нужен доступ к исходному индексу значения с помощью .index), join те значения вместе в строку, и вставьте их во внутреннюю #color HTML.

function showRandomColors() {
  var colors = ["white", "red", "blue", "yellow", "orange", "brown", "black", "violet", "purple", "pink", "green"];
  document.querySelector("#colors").innerHTML = randoSequence(colors).slice(0, 3).map(i => i.value).join(" ");
}

showRandomColors();
setInterval(showRandomColors, 4000);

<script src="https://randojs.com/1.0.0.js"></script>
<div id="colors"></div>

Как я уже сказал, этот код использует rando js .com , поэтому, если вы хотите использовать этот код, убедитесь, что вы иметь это в заголовке вашего документа html:

<script src="https://randojs.com/1.0.0.js"></script>