I want these messages to randomly display, but none repeat, till it's gone through them all. Why are some messages getting skipped or I'm getting 'undefined' returned? 

```
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) {
  getNewRanNum();
  return;
} 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();

```