Javascript
글자 출력과 alert() 문제
/*

예제 02: 입력받은 문자열을 1초마다 한 문자씩 출력하기

입력받은 문자열을 1초에 한 문자씩 #panel에 출력해 주세요.

모든 문자를 출력하면 “종료됐습니다.” 라는 알림메시지를 출력한 후 타이머를 정지시켜 주세요.

*/

$(document).ready(function() {

var str = window.prompt("문자를 입력해 주세요.");

var $output = $("#output");

// 여기에 풀이를 입력해 주세요.

var index = 0;

var timerID = setInterval(function() {

// index에 해당하는 문자 구하기

var ch = str.charAt(index);

// 문자 출력

$output.append(ch);

// 다음 문자 인덱스 구하기

index++;

// 만약 모든 문자를 출력했다면 타이머 정지

if (index >= str.length) {

clearInterval(timerID);

alert("종료됐습니다.");

}

}, 500);

})

위 구문을 실행하면 가령 date를 입력하면

date문자의 length는 4입니다.


그러나 문자열의 첫번째는 ,,즉 charAt(0)은 d 입니다. 0부터 시작하는데요..


위 구문을  실행하면 index가 3이됐을때,,,

즉 var ch = str.charAt(3); 이때 e를 출력합니다.

그리고 바로 아래에

index++; 가 있으므로 index는 4가됩니다.

그러면 4는 즉, index(=4) >=str.length  조건이 맞기 때문에

clearInterval이 되고 alert 내용이 뜹니다.


즉, 순서를 본다면

index(3)의 문자인 e가 먼저 출력된 후,,,그 아래의 증감식과 조건문에 의해서

alert창이 떠야하는데요...


막상 실행해보면,

alert창이 먼저 떠버리고, 확인을 누른후에 'e'가 출력이 됩니다. 


구문의 순서를 보면 먼저 date가 다 뜬 후 alert창이 떠야하는 것이 정상같습니다. 

즉, 

var ch = str.charAt(index); // 여기서 index값이 3이되면 ,

$output.append(ch); //date가 다 출력됩니다.

index++; //그런후 여기서 index는 4가 되기 때문에 밑에,,,,

if (index >= str.length) { // 이 조건식이 충족되어서 alert창이 뜹니다.

왜냐면 str.length의 값은 4이기 때문입니다.

clearInterval(timerID);

alert("종료됐습니다.");


위 순서를 잘 보면,, 분명히,,,,date가 전부 다 출력된 후에 alert창이 떠야하는 것이

정상인데,,,,dat만 뜨고 alert창이 뜹니다. alert창에서 확인을 누르면 alert창이 사라지고, 바로 나머지 문자인 'e'가 떠서 최종으로 date가 됩니다.


str.length는 1로 시작하는 단순한 문자열의 갯수이며, 따라서

date문자의 str.length는 4입니다.

charAt()는 d->charAt(0), a->charAt(1)......e->charAt(3) 이렇게 되는데..


위 구문은 순서가 좀 이해가 안됩니다...


date에서 마지막 문자인 e가 출력되기도 전에 alert이 먼저 떠버리네요..


왜 이런 현상이 발생되나요..? =.-;;;


댓글 2