Javascript 为数组中的每个项添加延迟

我正在尝试使用jquery模拟名称的键入，以下是我到目前为止所做的：

var name = "hello there!";
var namesplit = name.split('');     
$(document).ready(function () {
    for (var i = 0; i < namesplit.length; i++) {
        $('.wrapper h1').append(namesplit[i]);
    }
});

var name=“你好！”；
var namesplit=name.split（“”）；
$（文档）.ready（函数（）{
对于（var i=0；i

---

基本上，我想要的是输入“hello there！”中的每个字符，稍微延迟一下，然后输入下一个字符。此外，这是插入一个h1，其中包含一个跨度（包含字符“|”）。我如何防止它覆盖范围（即，它应该是这样的：您好！不是|您好！）。谢谢

在

h1

<div class="wrapper">
     <h1><span></span><span>|</span></h1>
</div>

演示：

---

如果您使用的是一个非常大的字符串，那么创建这么多次并不是一个好主意，然后再试一次

$(document).ready(function () {
    var name = "hello there!";
    var namesplit = name.split('');

    function print() {
        if (!namesplit.length) {
            return;
        }
        $('.wrapper h1 span:first').append(namesplit.shift());
        setTimeout(print, 100)
    }

    print()
});

演示：

$（函数（）{
var name=“你好！”；
var namesplit=name.split（“”）；
对于（变量i=namesplit.length-1；i>=0；i--）{
$（'.wrapper'）.prepend（namesplit[i]）；
}
});
|

您可以编写一个函数来完成这项工作，或者创建一个构造函数，这样您就可以在页面中同时显示许多这样的动画：

function TypeIt(id, msg, delay) {
  this.el = document.getElementById(id);
  this.msg = msg;
  this.delay = delay;
  this.index = 0;
}

TypeIt.prototype.run = function() {
  var typeit = this;
  this.el.innerHTML = this.msg.substring(0, ++this.index);
  if (this.index < this.msg.length) {
    setTimeout(function(){typeit.run();}, this.delay); 
  }
}

window.onload = function(){
  var typeit = new TypeIt('d0', 'Hello World!', 100);
  typeit.run();
}

函数类型（id、消息、延迟）{
this.el=document.getElementById（id）；
this.msg=msg；
延迟=延迟；
该指数=0；
}
TypeIt.prototype.run=函数（）{
var typeit=这个；
this.el.innerHTML=this.msg.substring（0，++this.index）；
if（this.index

如果只需要一个实例，则可以使用模块模式或以下简单函数重构上述实例：

function typeIt(id, msg, delay, index) {
  index = index || 0;
  document.getElementById(id).innerHTML = msg.substring(0, ++index);
  if (index < msg.length) {
    setTimeout(function(){typeIt(id, msg, delay, index)}, delay);
  }
}

函数类型（id、消息、延迟、索引）{
指数=指数| | 0；
document.getElementById（id）.innerHTML=msg.substring（0，++index）；
如果（索引<消息长度）{
setTimeout（函数（）{typeIt（id，msg，delay，index）}，delay）；
}
}

您可以在h1中添加另一个跨距吗？是的，如果我愿意，我可以。或者如果您需要跨距之外的跨距，但在h1$（'h1'）.prepend（namesplit[I]）中添加跨距；

function TypeIt(id, msg, delay) {
  this.el = document.getElementById(id);
  this.msg = msg;
  this.delay = delay;
  this.index = 0;
}

TypeIt.prototype.run = function() {
  var typeit = this;
  this.el.innerHTML = this.msg.substring(0, ++this.index);
  if (this.index < this.msg.length) {
    setTimeout(function(){typeit.run();}, this.delay); 
  }
}

window.onload = function(){
  var typeit = new TypeIt('d0', 'Hello World!', 100);
  typeit.run();
}

function typeIt(id, msg, delay, index) {
  index = index || 0;
  document.getElementById(id).innerHTML = msg.substring(0, ++index);
  if (index < msg.length) {
    setTimeout(function(){typeIt(id, msg, delay, index)}, delay);
  }
}