JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container"></div>

JavaScript

var ranNums = [],
    container = $('#container'),
    messages = [
    'message 1',
    'message 2',
    'message 3',
    'message 4'
  ],
  totalMessages = messages.length;

function waitForNext() {
setTimeout(function(){
  changeMsg();
}, 1000);
}

function getNewRanNum() {
  var num = Math.floor(Math.random() * totalMessages);

  if(ranNums.indexOf(num) > -1) {
      return getNewRanNum();
    } else {
      ranNums.push(num);
      console.log(num, ranNums);
      return num;
    }
}

function changeMsg() {
var newMsg = getNewRanNum();
container.append(messages[newMsg] + '<br>');

if (ranNums.length === totalMessages) {
  console.log('end');
  return false;
}

waitForNext();
}

changeMsg();