循环遍历数组中的字符串，每秒显示一个

Question

$(function() {
    let testOne = 'test one.';
    let testTwo = 'test two';

    let messageBox = $('messagebox');

    let a = ['test:', testOne,'test2:', testTwo];
    let i = 1

    setInterval(cool, 1000)

    function cool() {
        messageBox.text(a[1])
    }
});

你好，

我是 JS 新手。我希望在屏幕上的计时器中显示 testOne 和 testTwo（将添加更多）。我得到了帮助才能走到这一步。例如，我正在尝试让一个单词及其英文定义在时间循环中出现在屏幕上，循环旋转单词。（有点像实时屏幕保护程序）

我错过了什么？

感谢您的时间、帮助和努力。

Answer 1

您可以轻松地换出数组中的消息并使用您的代码更新 html 元素。不是传入硬编码索引，而是递增一个数字直到它达到数组的长度 (n < array.length) 并将其重置为 0.

我个人建议将您的 messagebox 元素设为 div 或开箱即用的东西，只是为了提高可读性（这样就不会有人进来并对 messagebox 的来源感到困惑).但是，如果您有自定义 html 元素的特定用例，请确保您的操作正确。

https://jsfiddle.net/mswilson4040/oxbn8t14/2/

<messagebox>Initial Value...</messagebox> // custom HTML element called messagebox


$(function() {
    let testOne = 'test one.';
    let testTwo = 'test two';
        let interval = -1;
    let messageBox = $('messagebox');

    let a = ['test:', testOne,'test2:', testTwo];
    // let i = 1 <-- this isn't doing anything

    setInterval(cool, 1000)

    function cool() {
            interval = interval < a.length ? interval += 1 : 0;
        messageBox.text(a[interval])
    }
});

Answer 2

你有一个好的开始。

正如其他人所提到的，除非您使用自定义 HTML 元素（即 <messagebox>），否则请在选择器的开头使用 #表明 "messagebox" 是一个 ID。参见 jQuery's ID Selector。
```
$('#messagebox')
```
或者，使用 class 和 class selector。
```
$('.messagebox')
```
要显示的数组元素的索引当前被硬编码为 1。我们希望在每次迭代时增加它，以便文本发生变化。但是我们只想统计到数组元素个数，然后回到第一个重新开始。

下面，我使用 JavaScript 的 increment and remainder 运算符来增加 i，同时将其限制为 a 中的元素数量。注意"postfix"方法"returns the value before incrementing"，所以i从零开始。
```
a[i++ % a.length]
```

工作示例：

$(function() {

  let $messageBox = $('#messagebox');
  let testOne = 'test one.';
  let testTwo = 'test two.';
  let a = ['test:', testOne, 'test2:', testTwo];
  let i = 0;

  function cool() {
    $messageBox.text(a[i++ % a.length])
  }

  setInterval(cool, 1000);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="messagebox"></div>

编辑

我不喜欢让 i 无限期地计数。在大约 9 千万亿次循环迭代后，数学可能会变得不稳定，这是 JavaScript 可以安全计数的高度。

Safe in this context refers to the ability to represent integers exactly and to correctly compare them. For example, Number.MAX_SAFE_INTEGER + 1 === Number.MAX_SAFE_INTEGER + 2 will evaluate to true, which is mathematically incorrect. -- developer.mozilla.org

console.log(Number.MAX_SAFE_INTEGER);
console.log(Number.MAX_SAFE_INTEGER + 1);
console.log(Number.MAX_SAFE_INTEGER + 2);
console.log(Number.MAX_SAFE_INTEGER + 1 === Number.MAX_SAFE_INTEGER + 2);

所以，这是大约 300 万个世纪 之后发生的事情：

$(function() {

  let $messageBox = $('#messagebox');
  let testOne = 'test one.';
  let testTwo = 'test two.';
  let a = ['test:', testOne, 'test2:', testTwo];
  let i = 9007199254740990;

  function cool() {
    console.log(i);
    $messageBox.text(a[i++ % a.length])
  }

  setInterval(cool, 1000);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="messagebox"></div>

这还不够好。
我们需要这个运行远远超过 the end of time.
让我们保持安全：

$(function() {

  let $messageBox = $('#messagebox');
  let testOne = 'test one.';
  let testTwo = 'test two.';
  let a = ['test:', testOne, 'test2:', testTwo];
  let i = 0;

  function cycleText() {
    console.log(i);
    $messageBox.text(a[i]);
    i = ++i % a.length;
    setTimeout(cycleText, 1000);
  }

  cycleText();

});

body {
  font-size: 2em;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="messagebox"></div>

循环遍历数组中的字符串，每秒显示一个

Cycle through strings from an array, displaying one every second

javascript

jquery

loops

set

settimeout