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

标签 javascript jquery

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

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

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

最佳答案

使用 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>

关于javascript - 在一个时期之后改变文本,无限循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37361842/

相关文章:

javascript - javascript 中的模式弹出窗口

javascript - 优化。当用户提交表单时,加载对话框不会立即出现

javascript - 全宽 slider - 交叉淡入淡出过渡问题

jquery - 使用 CSS 和 JQuery 控制嵌入硬编码自动播放的 iframe

javascript - 从 iFrame 中卸载/删除内容

javascript - 如何在本地存储中存储和检索许多 JavaScript 变量

javascript - jQuery 从后退按钮上的数组中删除最后一个元素

javascript - LinkedIn API 示例实现不起作用

javascript - 当用户在 Popover 外部单击时关闭 Bootstrap Popover

javascript - 创建对象后附加 jquery 事件