如何使用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.....

多达很多次

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

另外，我遇​​到某种错误。

错误：{“消息”：“脚本错误。”，“文件名”：“”，“ 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 （要迭代的项目的索引）以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> 

Answer 2

您已经具有检查未定义索引的条件，但是错过了重新启动序列的其他条件。

另外，您对变量名的选择不多，即两个函数中的索引“ i”可能会引起混淆，因为一个函数遍历数组中的单词，而另一个遍历字符。

我已经重写了您的函数，并使整个代码对生产变得更友好，并且更易于理解：

 // array with text to type in typewriter var dataText = [ "Web Design.", "Web Development.", "Web Programming." ]; // typewriter speed // set delay time between each character typing time var CharDelay = 50; // pause time between each completed word (delay before next word starts) var WordPause = 1000; // set initial word in dataText array var WordOffset = 0; // set sequence restart interval N [ms] var RestartInterval = 3000; // type one text in the typewriter // keeps calling itself until complete word is printed function typeWriter(text, i, fnCallback) { // check if word isn't finished yet if (i < (text.length)) { // add next character to html document.querySelector("#typewriter").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) }, CharDelay); } // text finished, call callback if there is a callback function else if (typeof fnCallback == 'function') { // call callback after timeout setTimeout(fnCallback, WordPause); } } // start a typewriter animation in the dataText array // @param int j = dataText array word index function StartTextAnimation(j) { //console.log(j); //console.log(dataText.length); // restart animation after N seconds if (typeof dataText[j] == 'undefined' || j == dataText.length) { setTimeout(function() { StartTextAnimation(WordOffset); }, RestartInterval); } // check if dataText[j] exists else if (j < dataText[j].length) { // text exists! start typewriter animation typeWriter(dataText[j], 0, function() { // after callback (and whole text has been animated), start next word StartTextAnimation((j+1)); }); } } document.addEventListener('DOMContentLoaded', function(event) { // start text animation StartTextAnimation(WordOffset); }); 

 <div id="typewriter"></div>