● 텍스트 타이핑 효과 개선하기
앞에서 구현한 모든 자바스크립트 코드를 script.js 파일에 작성해 HTML 파일과 연결하고 나면 메인 화면에 커서가 깜빡이면서 텍스트를 입력했다가 지우는 것을 볼 수 있습니다.
그런데 텍스트 타이핑 효과는 이후 사용자가 다시 호출할 일이 없는 코드입니다. 그래서 다음과 같이 즉시 실행 함수 형태로 코드를 감싸 주면 작성한 코드를 조금 더 정리할 수 있습니다.
13/end/js/text_iife.js - 즉시 실행 함수로 코드 감싸기
// 텍스트 작성과 삭제 즉시 실행 함수
(function(){
const spanEl = document.querySelector("main h2 span");
const txtArr = ['Web Publisher', 'Front-End Developer', 'Web UI Designer', 'UX Designer', 'Back-End Developer'];
let index = 0;
let currentTxt = txtArr[index].split("");
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);
}
}
function deleteTxt(){
currentTxt.pop();
spanEl.textContent = currentTxt.join("");
if(currentTxt.length !== 0){
setTimeout(deleteTxt, Math.floor(Math.random() * 100));
}else{
index = (index + 1) % txtArr.length;
currentTxt = txtArr[index].split("");
console.log(currentTxt);
writeTxt();
}
}
writeTxt();
})();
이렇게 하면 전역 스코프를 오염시키지 않으면서(10.5 즉시 실행 함수 사용하기 참고) 타이핑 효과를 적용할 수 있습니다.
TIP | 최종으로 text.js 말고 text_iife.js 코드만 적용하면 됩니다.