如何在页面加载时延迟此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);
} );