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