如何在页面加载时延迟此Javascript代码？

Question

我希望在页面加载后延迟此输入效果而不是立即启动，我该怎么做？

document.addEventListener ('DOMContentLoaded',function(event) {

  var dataText = ["This is a typing effect"];

  function typeWriter(text, i, fnCallback) {
    if (i < (text.length)) {
      document.querySelector("h1").innerHTML = text.substring(0, i+1) +'<span aria-hidden="true"></span>';
      setTimeout(function() {
        typeWriter(text, i + 1, fnCallback)
      }, 75);
    }
    else if (typeof fnCallback == 'function') {
    }
  }
  function StartTextAnimation(i) {
    if (typeof dataText[i] == 'undefined'){
      setTimeout(function() {
        StartTextAnimation(0);
      }, 20000);
    }
    if (i < dataText[i].length) {
      typeWriter(dataText[i], 0, function(){
        StartTextAnimation(i + 1);
      });
    }
  }
  StartTextAnimation(0);
});

Answer 1

因此，您似乎希望在页面加载后将动画的开始延迟一段时间，而不是将延迟直到页面加载完毕。我们都误解了这一点，因为前者是一个比后者更不常见的用例。

您可以通过更改以下代码来实现此目的：

    if (i < dataText[i].length) {
      typeWriter(dataText[i], 0, function(){
        StartTextAnimation(i + 1);
      });
    }

......进入这个：

    if (i < dataText[i].length) {
      setTimeout(function() {
        typeWriter(dataText[i], 0, function(){
          StartTextAnimation(i + 1);
        });
      }, 5000);
    }

...延迟5秒（5000毫秒）

Answer 2

将整个函数放在setTimeout中。

document.addEventListener("DOMContentLoaded",function() {

setTimeout(function(){

 //do your work
}, 2000);
} );