Jquery sostituire il testo ogni 2 secondi con parole da una matrice

Question

voglio sostituire un testo in un arco con le id "parole" con le parole da un array ogni 2 secondi

$('#words').delay(1000).fadeOut(1000); 
    $(this).delay(3000).text('word2').fadeIn(1000); 
$(this).delay(5000).text('word3').fadeIn(1000); 
$(this).delay(7000).text('word4').fadeIn(1000); 

Questo è quello che ho ottenuto ma ovviamente smette di funzionare dopo 7 secondi .. come posso ripetere? O anche utilizzare un array per contenere le parole .. Grazie!

Answer 1

È possibile utilizzare setInterval() per fare questo:

$(function() { 
 
    count = 0; 
 
    wordsArray = ["Beta", "Gamma", "Delta", "Alpha"]; 
 
    setInterval(function() { 
 
    count++; 
 
    $("#word").fadeOut(400, function() { 
 
     $(this).text(wordsArray[count % wordsArray.length]).fadeIn(400); 
 
    }); 
 
    }, 2000); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id="word">Alpha</div>

Answer 2

Questo è facilmente realizzabile utilizzando solo Vanilla JS (JS normali senza jQuery) come mostrato di seguito.

Creare un ciclo setInterval() da eseguire ogni 2 secondi e randomizzare ogni volta per ottenere un elemento di matrice diverso.

var names = ['test1', 'test2', 'test3', 'test4']; 
 

 
setInterval(function() { 
 
    var rand = Math.floor(Math.random() * 4); 
 
    document.getElementById("name").innerHTML = names[rand]; 
 
}, 2000);

<div id="name">test</div>

Se si vuole avere un effetto di dissolvenza (come detto in un commento) la soluzione migliore sarà quella di utilizzare jQuery.