javascript - 在一个时期之后改变文本，无限循环

Question

我想在一段时间后更改一些文本。我有这个工作:

function nextMsg() {
    if (messages.length == 0) {

    } else {
        $('#message').html(messages.pop()).fadeIn(500).delay(1000).fadeOut(500, nextMsg);
    }
};

var messages = [
    "sleep",
    "eat",
    "drink",
    "read",
].reverse();

$('#message').hide();
nextMsg();

请参阅JSFIDDLE

我的问题:我想继续重复这些消息。换句话说，当显示最后一条消息时，从第一条消息再次开始循环，形成无限循环。代码中需要更改/添加什么？

Answer 1

使用 counter 和 %

var counter = 0;

function nextMsg() {
  $('#message').html(messages[counter % messages.length]).fadeIn(500).delay(1000).fadeOut(500, nextMsg);
  ++counter;
};
var messages = [
  "sleep",
  "eat",
  "drink",
  "read",
];
$('#message').hide();
nextMsg();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<p>
  Things to do: <span id="message"></span>
</p>