Запись массива символов в элемент не печатает первую букву

Question

Я пытаюсь выписать один символ за раз в элемент из массива слов. Я перебираю массив слов, разбивая каждое слово на массив символов. Оттуда я перебираю массив символов в jQuery.append каждую букву целевого элемента. Для любого слова, кроме первого в цикле, первая буква не записывается в элемент. Console.log (буква) показывает, что скрипт набирает букву. Я думаю, это может быть из-за того, что я угасаю элемент цели и обратно после каждого слова.

var words = ["demo", "sample", "taco", "potato"]; 
 

 
$(document).ready(function() { 
 
    typeStuff(); 
 
}); 
 

 
function typeStuff() { 
 
    //if the type target element does not exist, create it. Runs once. 
 
    if (!$("#typeTarget").length) { 
 
    $("#typeHere").append("<span id='typeTarget'></span>"); 
 
    } 
 

 
    //Create a string of tbe next word, then arrayify it. 
 
    var w = words.shift(); 
 
    var wordAsArray = w.split(""); 
 

 
    //create a 450 ms interval to type each word out. 
 
    var interval = window.setInterval(function() { 
 
    //First, check if no letters are left. 
 
    if (wordAsArray.length == 0) { 
 
     //If no letters are left, see if there's another word to pickup 
 
     if (words.length == 0) { 
 
     //Clear the interval, your work is done. Good job, scripto. 
 
     window.clearInterval(interval); 
 
     } else { 
 
     //Clear the interval and run the delete function. 
 
     window.clearInterval(interval); 
 
     deleteStuff(); 
 
     } 
 
    } else { 
 
     //If any letters are left, get the next letter and append it to #typeTarget 
 
     var letter = wordAsArray.shift(); 
 
     $("#typeTarget").append(letter); 
 
    } 
 
    }, 450); 
 
} 
 

 
function deleteStuff() { 
 

 
    //Fade #typeTarget out, delete its contents, then show it again. 
 
    $("#typeTarget").fadeOut(500, function() { 
 
    $("#typeTarget").html(""); 
 
    $("#typeTarget").css({ 
 
     display: "inline" 
 
    }); 
 
    }); 
 

 
    //Call the typeStuff function again to write the next word. 
 
    typeStuff(); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class="titleText">This is a <span id="typeHere"></span></span>

Answer 1

Как Понтии отметили:

Права, ваша нарастающий из занимает 500 миллисекунд, но первая итерация интервального таймера происходит 50 миллисекунд до этого.

Исправлено исправление затухания до 300 миллисекунд.