JavaScript的setTimeout的时间比预期EXCUTE

Question

我试图使代码的代码太多时间工作正常计算器，但是当我添加JavaScript代码，它有stopped.any方式 我有这样的代码：

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

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

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

我做的代码写一个字符每秒，完整的文本后，会删除一个字符每秒，问题是，完成文字它将等待几秒钟，开始删除前，后人物。我没有那样做。

我跟着settimeout方法的时间值，一切都很好。

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

请任何帮助。

Answer 1

我贴近你的代码，修复实际上是相当简单的，我下面THE FIX标记它。

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

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

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

Answer 2

不要排队应用程序连续超时应用程序做他们一个接一个。

下面是你应该怎么做。我加快了一点，但事实并非如此。

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