Javascript 如何以不同的间隔多次更改文本？

假设你有这样的东西

HTML:

<p id="text"></p>

有没有什么方法可以让你不必写十次同一行代码就可以显示十个这样的句子？我想不出来..

类似于：

for(var i = 1; i < 10 ; i++) {
    setTimeout(function() {$('#text').html("Sentence #" + i);}, i * 1000);
}

for（变量i=1；i<10；i++）{
setTimeout（function（）{$（'#text'）.html（“句子#“+i）；}，i*1000）；
}

---

如果你不需要这个句子的格式。

看起来像是

map

就是你要找的

const $elem = $('#text');

[
  ['First sentence', 1000],
  ['Second sentence', 2000],
].map(([text, delay]) => setTimeout(() => $elem.text(text), delay));

在变量中存储指向元素的指针也是个好主意，这样浏览器只需搜索一次

如果要设置的内容只是字符串，则可能还需要切换到

text

方法

免责声明：此代码是用ES6编写的，因此它在IE（但在Edge）和Safari中不起作用。

var-statemens=[‘第一句’、‘第二句’、‘其他一些句子’]；
var-timerId=null；
函数nextContent（）{
var语句=句子.shift（）；
$（'文本'）。文本（句子）；
如果（句子长度==0）{
清除间隔（timerId）；
}
}
timerId=window.setInterval（nextcontence，1000）

这将作为循环运行，仅在最后一个句子完成后显示下一个句子


在
i
上创建一个闭包并举办一个聚会

var $text = $("#text");
var numbers = ["First", "Second", "Third", "Fourth", "Fifth", "Sixth", "Seventh", "Eighth", "Ninth", "Tenth"];

for (var i = 1; i <= 10; ++i) {
  (function(index) {
    setTimeout(function() { 
      $text.html(numbers[index-1] + " sentence");
    }, i * 1000);
  })(i);
}

var$text=$（“#text”）；
变量数=[“第一”、“第二”、“第三”、“第四”、“第五”、“第六”、“第七”、“第八”、“第九”、“第十”]；
对于（var i=1；i当您不想在多个位置多次键入同一内容时，请创建一个易于使用的插件


$.fn.queuedText=函数（文本，延迟）{
var self=这个；
text=Array.isArray（text）？text:[text]；
$.each（文本、函数（\ux、txt）{
self.delay（delay）.queue（函数（next）{
self.text（txt）；
next（）；
});
});
回归自我；
}
//用作………->
$（'#text'）.queuedText([
“第一句”，
“第二句”，
“第三句”，
“第四句”，
“第五句”，
“第六句”，
“第七句”，
“八句话”，
“第九句”，
“第十句”
]，1000）；

您在这里并没有做十次。我相信主要的目标不是做十次，而是设置不同的文本，并有一定的延迟。@MarioLopez这很容易扩展到更多情况。@ПаааПааааааааааааааа{案文：“第一句”，延迟：1000}
，因此您可以访问
项.text
和
项.delay
。这是ES6，它很好，但不是所有浏览器都支持。setTimeout不是一个精确的计时器，因此它仍然可以按不同的顺序启动回调。尽管可能性很小。有效点@JonKoops，我认为，由于本例中的粒度是1秒，因此应该不会成为问题。我不确定这是否会起作用，因为调用函数之前上下文中的
I
会发生变化。创建的函数都共享相同的
I
上下文。此外，OP要求可变计时。@Ourobrus从他发布的代码中，我假设间隔1秒。但另一点是有效的，最好是在闭包中对其进行rap以确保上下文得到维护，尽管我的测试没有显示任何差异。谢谢。这就是我所寻找的。函数末尾的（I）做了什么？发生的是立即调用匿名函数（因此，
（）
函数关闭后。括号内的
i
来自外部for循环中的
i
。我们需要这样做的原因是，我们必须在循环执行时捕获
i
的值。否则，我们将始终获得
i
的最终值。还要注意
索引
，（匿名函数中的参数）是for循环每次迭代时
i
的值。
var sequence = [
  ['first sentence',1000],
  ['second sentence',2000]
];

var $target = $('#text');

sequence.map(function(v,i,a){
  return setTimeout(function(){
    $target.innerHtml(v[0]);
  },v[1]);
});

var a = [
  "test 1",
  "test 2",
  "test 3",
  "test 4",
  "test 5"
];

(function update(idx) {

    $("#text").html(a[idx]);
    setTimeout(update, 1000, ((++idx) % a.length));

})(0);

var $text = $("#text");
var numbers = ["First", "Second", "Third", "Fourth", "Fifth", "Sixth", "Seventh", "Eighth", "Ninth", "Tenth"];

for (var i = 1; i <= 10; ++i) {
  (function(index) {
    setTimeout(function() { 
      $text.html(numbers[index-1] + " sentence");
    }, i * 1000);
  })(i);
}