currentTxt 변수를 콘솔창에 출력해 보면 다음처럼 첫 번째 ‘Web Publisher’ 문장이 문자 단위로 쪼개져 배열로 출력되는 것을 볼 수 있습니다.
실행결과
['W', 'e', 'b', ' ', 'P', 'u', 'b', 'l', 'i', 's', 'h', 'e', 'r']
텍스트가 입력되는 효과의 핵심은 currentTxt 변수에 할당된 배열 요소를 앞에서부터 한 개씩 출력하는 것입니다. 그러면 마치 텍스트가 한 글자씩 작성되는 것처럼 보이게 됩니다. 이를 위해 다음처럼 writeTxt() 함수를 만들어 배열 요소를 한 개씩 출력하게 합니다.
function writeTxt(){
spanEl.textContent += currentTxt.shift(); // ①
if(currentTxt.length !== 0){ // ②
setTimeout(writeTxt, Math.floor(Math.random() * 100));
}else{ // ③
currentTxt = spanEl.textContent.split("");
setTimeout(deleteTxt, 3000);
}
}
writeTxt();