Question

我想一个接一个地显示多个字符串，我希望每个字符串中的字母一次出现一个，直到字符串完成并循环到下一个字符串。应该连续循环运行。

var example = ['IT Solutions', 'Professional Work Ethic'];
textSequence(0);
function textSequence(i) {
  if (example.length > i) {
    setTimeout(function() {
      document.getElementById("sequence").innerHTML = example[i];
      textSequence(++i);
    }, 4000);
  } else if (example.length == i) { // Loop
    textSequence(0);
  }
}

<div class="container" id="sequence"></div>

Answer 1

你可以加入字符串，然后像你一样循环遍历它们。但是你要坚持value并递归传递它以跟踪你已经拥有的东西。

这可能不是您想要的，但我认为您可以通过使用它来解决这个问题。

var example = ['IT Solutions', 'Professional Work Ethic'];
var eString = example.join(' ');

textSequence(0, '');
function textSequence(i, value) {
  if (eString.length > i) {
    setTimeout(function() {
      value += eString[i];
      document.getElementById("sequence").innerHTML = value;
      textSequence(++i, value);
    }, 100);
  } else if (eString.length == i) { // Loop
    textSequence(0, '');
  }
}

<div class="container" id="sequence"></div>

Answer 2

我更喜欢@adpro的答案，但这里有一个保留原始数组的替代方案：

showLettersOf(
  ['IT Solutions', 'Professional Work Ethic'],
  document.querySelector('#sequence')
); 

function showLettersOf(arrayOfStrings, el) {
  var stringIndex=0, letterIndex=0, str="";
  return setInterval(function(){
    str += arrayOfStrings[stringIndex].charAt(letterIndex++);
    el.innerHTML = str;
    if (letterIndex >= arrayOfStrings[stringIndex].length){
      letterIndex=0;
      str="";
      if (++stringIndex >= arrayOfStrings.length) stringIndex=0;
    }
  }, 100);
}

为循环序列一个接一个地显示字母

2 个答案: