Question

我想在我的网站上产生类型编写器效果。这样，它可以无限次地重复数组中的数据，而不仅仅是一次。

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

例如，我有一个数组：

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

我希望这样显示它：

Amsterdam
Full Service.
Webdevelopment
Vivank

Amsterdam
Full Service.
Webdevelopment
Vivank

Amsterdam
Full Service.
Webdevelopment
Vivank.....

多次

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

另外，我遇到某种错误。

错误： {“ message”：“脚本错误。”，“ 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（要迭代的项目的索引）模 dataText.length，以确保一次{{1} }到达i，dataText.length被StartTextAnimation而不是不存在的索引调用：

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>检查之后使用else if而不是undefined：

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);
});

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>

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

2 个答案: