JSFiddle - React, Tailwind, and code Playground

by mjandrews

HTML

<ul>
    <li id='startbutton'>Click me.</li>
    <li id='word'></li>
</ul>

JavaScript

// When you click on the 'click me', the items in `wordlist` 
// are shown sequentially for `duration` msec. 

var wordlist = ['A', 'B', 'C', 'D', 'E'];
var duration = 200;
var i = 0;

show_next_word = function () {
    if (i < wordlist.length) {
        $('#word').hide()
            .text(wordlist[i++])
            .fadeIn()
            .delay(duration)
            .fadeOut(show_next_word // recursively call until end of word list  
        );
    } else {
        i = 0; // re-set index
    }
};

$('#startbutton').click(show_next_word);