Javascript 为JS动画文本添加延迟？

下面是一个自动输入文本动画的代码。文本在图像前面，我希望人们先看到全图，然后文本开始“键入”。我想最好的方法是在文本开始动画之前增加2-3秒的延迟，但我不确定如何做到这一点

非常感谢您的帮助。谢谢

function cursorAnimation() {
  $('#cursor').animate({
    opacity: 0
  }, 'fast', 'swing').animate({
    opacity: 1
  }, 'fast', 'swing');
}
$(document).ready(function() {
  setInterval('cursorAnimation()', 1000);
});

var text = 'TEXT GOES HERE';

$.each(text.split(''), function(i, letter) {
  setTimeout(function() {
    $('#container').html($('#container').html() + letter);
  }, 110 * i);
});

尝试使用setTimeout（）函数在一段时间后调用您的函数，即

$(document).ready(function() {
    setTimeout(yourfunction(), 1000); //changes milliseconds as per your need.
})

---

一般来说。您可以将延迟代码打包到回调中，然后将回调传递到setTimeout方法中。用于在处理对象时保留功能。我建议在打包回调时调用

bind（this）

setTimeout(function () {
    console.log("Delayed message");
}.bind(this), 3000);

就你而言

function cursorAnimation() {
  $('#cursor').animate({
    opacity: 0
  }, 'fast', 'swing').animate({
    opacity: 1
  }, 'fast', 'swing');
}
$(document).ready(function() {
  setInterval('cursorAnimation()', 1000);
});

var text = 'TEXT GOES HERE';

setTimeout(function () {
    // delayed code
    $.each(text.split(''), function(i, letter) {
    setTimeout(function() {
        $('#container').html($('#container').html() + letter);
    }, 110 * i);
    });
    // end of delayed code
}.bind(this), 3000);

---

添加一些任意延迟不是最好的方法。您永远不知道在不同类型的网络上加载一个图像需要多少时间，有些非常快，有些可能非常慢

相反，您应该在某些事件上触发代码，例如，当图像已加载时。您可以选择在窗口加载时运行代码，如下所示：

function cursorAnimation() {
  $('#cursor').animate({
    opacity: 0
  }, 'fast', 'swing').animate({
    opacity: 1
  }, 'fast', 'swing');
}
$(document).ready(function() {
  setInterval('cursorAnimation()', 1000);

  $(window).on("load", function(){
    // do here tasks that you want to run after all page assets e.g. images have been loaded
    showText();
  });//window load()
});

function showText() {
  var text = 'TEXT GOES HERE';
  $.each(text.split(''), function(i, letter) {
    setTimeout(function() {
      $('#container').html($('#container').html() + letter);
    }, 110 * i);
  });
}

---

如果您编写了该代码，那么您已经知道如何使用setTimeout（）…我没有编写代码。这是我参与的一个项目的一部分，后端开发人员正在休假。我不想等待他的答复，而是想自己去做。我只是一个简单的设计师，对一些代码了如指掌。：）已经有函数用于设置代码中的延迟，这是非常正确的。我不是很具体的项目，这是一个原型的展示，将在当地显示，所以加载时间不会是一个问题。但我认为这是项目上线的最佳方式。非常感谢你！