Javascript jQuery通过迭代数组来更改html文本

如果我编写html：

<script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<h1 id="message">
</h1>

而JS：

messages = ["Here", "are", "some", "messages."]

$(function() {

  for (var i = 0; i < messages.length; i++) {
    $('#message').html(messages[i]).delay(1000);
  }

});

messages=[“这里”、“是”、“一些”、“消息”。]
$（函数（）{
对于（var i=0；i

在加载页面时，我希望看到数组中的每个字符串都会出现延迟。然而，我所看到的只是“消息”出现。在执行任何延迟之前，for循环似乎会立即迭代数组中的每个值

---

我见过另一种获得所需视觉结果（）的方法，但我想知道为什么以前的方法不起作用。执行此代码时发生了什么

这就是我延迟更改邮件的方式。

函数延迟循环（延迟、消息）{
var时间=100；
$（消息）。每个（函数（k，$this）{
setTimeout（函数（）
{
$（“#message”）.html（$this）；
}，时间）
时间+=延迟；
});
}
delayLoop（1000，[“这里”，“是”，“一些”，“消息]）
这就是我延迟邮件更改的方式。
函数延迟循环（延迟、消息）{
var时间=100；
$（消息）。每个（函数（k，$this）{
setTimeout（函数（）
{
$（“#message”）.html（$this）；
}，时间）
时间+=延迟；
});
}
delayLoop（1000，[“这里”，“是”，“一些”，“消息]）
您需要一些与

$(function() {
  for (var i = 0; i < messages.length) {
    var done=false;
    $('#message').html(messages[i]).delay(1000).queue(function(){
     done=true;
     $(this).dequeue();
    });
     if(done==true){ 
      i++;
     }
   }
});

$（函数（）{
对于（变量i=0；i
您需要一些与

$(function() {
  for (var i = 0; i < messages.length) {
    var done=false;
    $('#message').html(messages[i]).delay(1000).queue(function(){
     done=true;
     $(this).dequeue();
    });
     if(done==true){ 
      i++;
     }
   }
});

$（函数（）{
对于（变量i=0；i
注意jQuery的
延迟
专门用于效果；像
html
这样的方法不使用效果队列，因此不受
delay
的影响

使用JavaScript的本机函数可以更好地解决这个问题。有很多方法可以做到这一点；事实上，您甚至不需要jQuery


let messages=[“Here”，“are”，“some”，“messages.”；
设延时=1000；
let header=document.getElementById（“消息”）；
messages.forEach（函数（message，i）{
setTimeout（函数（）{
header.innerText=消息；
}，延迟*i）；
});
注意jQuery的
延迟
是专门针对效果的；像
html
这样的方法不使用效果队列，因此不受
delay
的影响

使用JavaScript的本机函数可以更好地解决这个问题。有很多方法可以做到这一点；事实上，您甚至不需要jQuery


let messages=[“Here”，“are”，“some”，“messages.”；
设延时=1000；
let header=document.getElementById（“消息”）；
messages.forEach（函数（message，i）{
setTimeout（函数（）{
header.innerText=消息；
}，延迟*i）；
});
感谢您的回答和评论，非常有帮助

我还发现这篇文章很有帮助：，并从中写下以下内容（同样有效）：

（我使用了.show和.hide，因为如果没有它们，只会出现一个数组值。我不确定这是为什么，但这是另一个问题。）
感谢您的回答和评论，非常有用

我还发现这篇文章很有帮助：，并从中写下以下内容（同样有效）：

（我使用了.show和.hide，因为如果没有它们，只会出现一个数组值。我不确定这是为什么，但这是另一次的问题。）
delay（）是异步的，但循环不是，因此循环在延迟之前完成，并显示数组中的最后一个元素。您需要使用回调函数出现“消息”的原因是因为它是循环完成对对象的迭代时的最后一项。您需要在循环外部创建另一个变量来保存整个过程。delay（）是异步的，但循环不是，因此循环在延迟之前完成，并显示数组中的最后一个元素。您需要使用回调函数出现“消息”的原因是因为它是循环完成对对象的迭代时的最后一项。您需要在循环之外创建另一个变量来保存整个过程。在查看JQluv的答案时，它比我的效率要高得多。继续使用他的答案，看看JQluv的答案，它比我的效率高很多。继续使用his。没有必要同时使用
setTimeout
和
delay
，因为两者都已经是异步的。您可以简单地执行类似于
$（messages）.each（函数（i，message）{setTimeout（函数（）{$（'#message'））.html（message）；}，delay*i）；}）谢谢，我没有注意到我这么做了，实际上我只是复制并粘贴了他的消息函数，因为没有必要重新编写整个内容，但现在已经修复了，谢谢。你还将
这个
传递给html调用，尽管
这个
在setTimeout回调中没有定义。是的，我知道，修复了。我真的不希望它运行我不喜欢给别人一个答案，我相信他们需要学习，所以如果你给他们指出了正确的方向。。。。。。不管怎样，上面的问题已经解决了，您可以运行它。没有必要同时使用
setTimeout
和
delay
，因为两者都已经是异步的。您可以简单地执行类似于
$（messages）.each（函数（i，message）{setTimeout（函数（）{$（'#message'））.html（message）；}，delay*i）；}）谢谢，我没有注意到我这么做了，实际上我只是复制并粘贴了他的消息函数，因为没有必要重写整个东西，但现在它已经修复了，谢谢。你