Question

我试图让代码在stackoverflow中正常工作但是当我添加了javascript代码时，它已经停止了。我有这段代码：

＆＃13;

showCharacters("hey, how are you");

function showCharacters(text) {
  var charactersArray = new String(text).split('');
  var i;
  for (i = 0; i < charactersArray.length; i++) {
    setCharacter(i, charactersArray);
  }
  deleteAll(i - 1);
}

function setCharacter(i, charactersArray) {
  setTimeout(function() {
    document.getElementById("characters").innerHTML = document.getElementById("characters").innerHTML + charactersArray[i];
  }, 1000 * i);
}

function deleteAll(i) {
  setTimeout(function() {
    var text = document.getElementById("characters").innerHTML;
    var charactersArray = new String(text).split('');
    var charactersArrayLength = charactersArray.length - 1;
    for (var j = charactersArrayLength; j >= 0; j--) {
      charactersArray.splice(j, 1);
      deleteCharacter(charactersArray.join(""), i + charactersArrayLength - j + 1);
    }
  }, (i + 1) * 1000);
}

function deleteCharacter(text, i) {
  setTimeout(function() {
    document.getElementById("characters").innerHTML = text;
  }, 1000 * i);
}

＆＃13;

#divContainer {
  display: flex;
  align-items: center;
  float: right;
}
#characters {
  font-weight: 700;
  color: rgb(0, 0, 0);
  font-size: 40px;
  padding-top: 2px;
  white-space: nowrap;
}

＆＃13;

<div id="divContainer">
  <h1 id="characters">
  </h1>
</div>

＆＃13;

我让代码每秒写一个字符，在完成文本后它会每秒删除一个字符，问题是在完成文本后它会等待几秒钟才开始删除字符。我没有那样做。

我已经遵循了settimeout方法的时间值，一切都很好。

我希望它在完成文本后直接删除字符。

请帮助。

Answer 1

不要将app中的超时排成一行，一个接一个地执行。

这是你应该怎么做的。我加快了时间，但重要的不是。

＆＃13;

var text = "Add a new timeout as needed."
var div = document.createElement("div");
document.body.appendChild(div);
var textPos = 0;
function textAdd(){
   div.textContent += text[textPos++];
   if(textPos >= text.length){
      setTimeout(clearText,1000);
   }else{
      setTimeout(textAdd,200);
   }
}
function clearText(){
   textPos --;
   div.textContent = text.substr(0,textPos);
   if(textPos === 0){
       setTimeout(textAdd,1000);
   }else{
       setTimeout(clearText,200);
   }
}
textAdd();

＆＃13;

Answer 2

我接近你的代码，修复实际上非常简单，我用下面的THE FIX标记。

＆＃13;

// Replace spaces with non-breaking spaces so it does not stutter, and use global var
var text = "hey, how are you".replace(/ /g, String.fromCharCode(160));
showCharacters();

function showCharacters() {
  var chars = new String(text).split('');
  var i;
  for (i = 0; i < chars.length; i++) {
    setCharacter(i, chars);
  }
  deleteAll(i - 1);
}

function setCharacter(i, chars) {
  setTimeout(function() {
    document.getElementById("characters").innerHTML = document.getElementById("characters").innerHTML + chars[i];
  }, 200 * i);
}

function deleteAll(i) {
  setTimeout(function() {
    var chars = new String(text).split('');
    var len = chars.length - 1;
    for (var j = len; j >= 0; j--) {
      chars.splice(j, 1);
      deleteCharacter(chars.join(""), i - j + 1); // THE FIX: don't add length here
    }
  }, (i + 1) * 200);
}

function deleteCharacter(text, i) {
  setTimeout(function() {
    document.getElementById("characters").innerHTML = text;
  }, 200 * i);
}

＆＃13;

#divContainer {
  display: flex;
  align-items: center;
  float: right;
}
#characters {
  font-weight: 700;
  color: rgb(0, 0, 0);
  font-size: 40px;
  padding-top: 2px;
  white-space: nowrap;
}

＆＃13;

<div id="divContainer">
  <h1 id="characters">
  </h1>
</div>

＆＃13;

javascript settimeout需要比预期更多的时间来执行代码

2 个答案: