JSFiddle - React, Tailwind, and code Playground

by c_kick

HTML

<input type="button" id="generate" value="Generate">
<div id="generated"></div>
<br/>
<div id="status">Press 'generate'</div>

JavaScript

var Array1 = new Array(
    "Sentence 1 - A ",
    "Sentence 1 - B ",
    "Sentence 1 - C ",
    "Sentence 1 - D ",
    "Sentence 1 - E ",
    "Sentence 1 - F ",
    "Sentence 1 - G "
);

var Array2 = new Array(
    "Sentence 2 - A",
    "Sentence 2 - B",
    "Sentence 2 - C",
    "Sentence 2 - D",
    "Sentence 2 - E",
    "Sentence 2 - F",
    "Sentence 2 - G"
);

var Array3 = new Array(
    "Sentence 3 - A",
    "Sentence 3 - B",
    "Sentence 3 - C",
    "Sentence 3 - D",
    "Sentence 3 - E",
    "Sentence 3 - F",
    "Sentence 3 - G"
);

//define acceptable combinations of arrays
var combo0 = new Array(Array1, Array2); 
var combo1 = new Array(Array1, Array2, Array3);

//define global vars
var i = 0;
var times = 8;
var speed = 140;
var content = '';

//write sentence to box. If counter is a multiple of the 'times' var: append instead of write
function showMessage(msg, counter){
    $('div#generated').html(content+msg);
    if(counter % times === 0) {
        content = $('div#generated').html();
    }
}

//Generate from array 'list', simulating a 'slot machine
function Generate(lists, n, i, callbackFnk) {
        if (!(i >= 0)) { i= 0; }
        setTimeout((function(msg){
            i++;
            return function(){
                if (i % times != 0){
                    //We haven't reached a multiple of the times variable yet, keep going.
                    Generate(lists, n, i, callbackFnk);
                } else if (i % times === 0 && i != 0 && n < (lists.length-1)) {
                    //Multiple reached, increase n
                    n++;
                    Generate(lists, n, i, callbackFnk);
                } else if (n == (lists.length-1)) {
                    //we are done as there are no more arrays to go over
                    showMessage(msg, i);
                    if (callbackFnk) callbackFnk.call(this, i);
                    return false;
                }
                showMessage(msg, i);
            }
        })(
           ...