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