Creé una función que lee 8 nombres de usuario aleatorios de un sitio web de API usando fetch
fetch('https://api.github.com/users').then(function(response) { response.json().then(function(users){ document.write("Highlighred Github users") for (let i=0; i< 8; i++) { document.write('<br>') document.write((users[Math.floor(Math.random() *users.length)].login)) } }); }).catch(err => console.error(err));Estoy tratando de modificarlo de modo que los 8 usuarios aleatorios que se muestran cambien/actualicen cada 30 segundos con una nueva lista. Intenté hacer tal cosa modificando el bucle for para que sea una función que opere en función de un temporizador. Lo siguiente reemplaza el código de bucle for en el anterior
var myVar=setInterval(function(){myTimer()},30000); function myTimer() { for (let i=0; i< 8; i++) { document.write('<br>') document.write((users[Math.floor(Math.random() *users.length)].login)) }Sin embargo, esta función genera una nueva lista de 8 usuarios aleatorios cada enésimo segundo en lugar de cambiar la existente.
No puede usar document.write después de que se cargue la página. Agregar un elemento a la página. Establece el texto de ese elemento.
const users = [ { login: 'A' }, { login: 'B' }, { login: 'C' }, { login: 'D' }, ]; const elem = document.getElementById("user"); function showNext() { user.textContent = users[Math.floor(Math.random() * users.length)].login window.setTimeout(showNext, 3000); } showNext(); <div id="user"></div>La mejor solución es usar una reproducción aleatoria para que no se repita. Y cuando se agote, puede detener o reorganizar
function shuffle(array) { let currentIndex = array.length, randomIndex; while (currentIndex != 0) { randomIndex = Math.floor(Math.random() * currentIndex); currentIndex--; [array[currentIndex], array[randomIndex]] = [ array[randomIndex], array[currentIndex]]; } return array; } const users = [ { login: 'A' }, { login: 'B' }, { login: 'C' }, { login: 'D' }, ]; const elem = document.getElementById("user"); function runNames() { const shuffled = shuffle(users.slice()); function showNext() { user.textContent = shuffled.pop().login; const runNext = shuffled.length ? showNext : runNames; window.setTimeout(runNext, 3000); } showNext(); } runNames(); <div id="user"></div>