javascript - 如何使用 JS 重复 Type Writer 效果？

Question

我想在我的网站上使用打字机效果。这样它就可以无限次地重复数组中的数据，而不仅仅是一次。

我尝试用 JS 构建一个，但它只在数组中显示一次数据。

例如我有一个数组:

var dataText = [ "Amsterdam.", "Full Service.", "Webdevelopment.", "Vivank"];

我希望它像这样显示:

Amsterdam
Full Service.
Webdevelopment
Vivank

Amsterdam
Full Service.
Webdevelopment
Vivank

Amsterdam
Full Service.
Webdevelopment
Vivank.....

upto many times

我的代码正在执行的操作在一个周期后停止。我希望它无限次地重复循环。

此外，我遇到了某种错误。

Error: { "message": "Script error.", "filename": "", "lineno": 0, "colno": 0 }

有什么帮助吗？

还有如何为动画添加暂停，以便它在一分钟后开始更改 p 中的文本？

这是我到目前为止尝试过的:

document.addEventListener('DOMContentLoaded',function(event){
  // array with texts to type in typewriter
  var dataText = [ "Amsterdam.", "Full Service.", "Webdevelopment.", "Vivank"];
  
  // type one text in the typwriter
  // keeps calling itself until the text is finished
  function typeWriter(text, i, fnCallback) {
    // chekc if text isn't finished yet
    if (i < (text.length)) {
      // add next character to h1
     document.querySelector("#tw").innerHTML = text.substring(0, i+1) +'<span aria-hidden="true"></span>';

      // wait for a while and call this function again for next character
      setTimeout(function() {
        typeWriter(text, i + 1, fnCallback)
      }, 100);
    }
    // text finished, call callback if there is a callback function
    else if (typeof fnCallback == 'function') {
      // call callback after timeout
      setTimeout(fnCallback, 700);
    }
  }
  // start a typewriter animation for a text in the dataText array
   function StartTextAnimation(i) {
     if (typeof dataText[i] == 'undefined'){
        setTimeout(function() {
          StartTextAnimation(0);
        }, 20000);
     }
     // check if dataText[i] exists
    if (i < dataText[i].length) {
      // text exists! start typewriter animation
     typeWriter(dataText[i], 0, function(){
       // after callback (and whole text has been animated), start next text
       StartTextAnimation(i + 1);
     });
    }

  }
  // start the text animation
  StartTextAnimation(0);
});

<p id="tw">A</p>

Answer 1

您需要做的就是传递 i(您正在迭代的项目的索引)modulo dataText.length，以确保一旦 i 达到 dataText.length，StartTextAnimation 将使用 0 而不是索引调用不存在:

StartTextAnimation((i + 1) % dataText.length);

document.addEventListener('DOMContentLoaded',function(event){
  // array with texts to type in typewriter
  var dataText = [ "Amsterdam.", "Full Service.", "Webdevelopment.", "Vivank"];
  
  // type one text in the typwriter
  // keeps calling itself until the text is finished
  function typeWriter(text, i, fnCallback) {
    // chekc if text isn't finished yet
    if (i < (text.length)) {
      // add next character to h1
     document.querySelector("#tw").innerHTML = text.substring(0, i+1) +'<span aria-hidden="true"></span>';

      // wait for a while and call this function again for next character
      setTimeout(function() {
        typeWriter(text, i + 1, fnCallback)
      }, 100);
    }
    // text finished, call callback if there is a callback function
    else if (typeof fnCallback == 'function') {
      // call callback after timeout
      setTimeout(fnCallback, 700);
    }
  }
  // start a typewriter animation for a text in the dataText array
   function StartTextAnimation(i) {
     if (typeof dataText[i] == 'undefined'){
        setTimeout(function() {
          StartTextAnimation(0);
        }, 20000);
     }
     // check if dataText[i] exists
    if (i < dataText[i].length) {
      // text exists! start typewriter animation
     typeWriter(dataText[i], 0, function(){
       // after callback (and whole text has been animated), start next text
       StartTextAnimation((i + 1) % dataText.length);
     });
    }

  }
  // start the text animation
  StartTextAnimation(0);
});

<p id="tw">A</p>

或者，对于一个完整循环完成后的大延迟，在 undefined 检查之后使用 else if 而不是 if:

if (dataText[i] === undefined) {
  setTimeout(function() {
    StartTextAnimation(0);
  }, 20000);
} else if (i < dataText[i].length) {
  // text exists! start typewriter animation
  typeWriter(dataText[i], 0, function() {
    // after callback (and whole text has been animated), start next text
    StartTextAnimation(i + 1);
  });
}

document.addEventListener('DOMContentLoaded', function(event) {
  // array with texts to type in typewriter
  var dataText = ["Amsterdam.", "Full Service.", "Webdevelopment.", "Vivank"];

  // type one text in the typwriter
  // keeps calling itself until the text is finished
  function typeWriter(text, i, fnCallback) {
    // chekc if text isn't finished yet
    if (i < (text.length)) {
      // add next character to h1
      document.querySelector("#tw").innerHTML = text.substring(0, i + 1) + '<span aria-hidden="true"></span>';

      // wait for a while and call this function again for next character
      setTimeout(function() {
        typeWriter(text, i + 1, fnCallback)
      }, 100);
    }
    // text finished, call callback if there is a callback function
    else if (typeof fnCallback == 'function') {
      // call callback after timeout
      setTimeout(fnCallback, 700);
    }
  }
  // start a typewriter animation for a text in the dataText array
  function StartTextAnimation(i) {
    if (dataText[i] === undefined) {
      setTimeout(function() {
        StartTextAnimation(0);
      }, 20000);
    } else if (i < dataText[i].length) {
      // text exists! start typewriter animation
      typeWriter(dataText[i], 0, function() {
        // after callback (and whole text has been animated), start next text
        StartTextAnimation(i + 1);
      });
    }
  }
  // start the text animation
  StartTextAnimation(0);
});

<p id="tw">A</p>