/*예제 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이 먼저 떠버리네요..
왜 이런 현상이 발생되나요..? =.-;;;
자바스크립트의 alert() 함수는 브라우저 다이얼로그 창을 띄우는 함수입니다.
그런데 이 브라우저 다이얼로그 창의 특징이 있는데요, 다이얼로그 창이 뜨면 브라우저에서 일어나는 모든 실행을 정지시킨다는 것입니다.
즉, 브라우저에서 실행되는 모든 동작을 정지시키면서 다이얼로그를 띄우게 됩니다.
아마도 이상하다고 생각하시는 부분은,
올려주신 소스 코드에서는 $output.append(ch); 를 통해 화면에 출력하는 코드가 먼저 있고, 그 이후에 alert() 함수를 실행하게 되어있는데
마지막 글자가 화면에 나오기 전에 alert() 함수가 실행되는 것처럼 보여서 헛갈리실 수 있습니다.
그러나 코드에서는 문제가 없고, 생각하신 대로 $output.append(ch); 코드가 먼저 실행되고 그 다음에 alert() 함수가 호출된 것은 맞습니다.
그런데 유의하실 것은 $output.append(ch); 코드는 화면 상의 div 영역에 글자를 출력하는 코드입니다. 엄밀하게 말하면 화면에 글자를 그리는(렌더링하는) 코드라고 보시면 됩니다.
따라서 눈에 보이지는 않지만 화면에 그리는데에는 어느 정도의 시간이 소요됩니다. 그것이 너무 빨라서 우리 눈에 보이지 않을 뿐입니다.
즉, $output.append(ch); 를 통해 화면에 그릴 준비를 하는 그 짧은 순간에 바로 이어서 alert() 함수가 실행되면서 브라우저의 모든 동작을 정지시켰다고 이해하시면 될 것 같습니다.
따라서 화면에는 세번째 글자까지만 출력되고 나머지 글자는 화면에 아직 그려지지 않은 상태에서 브라우저 다이얼로고 창이 뜬 것입니다.
이 다이얼로그 창을 닫으면 그제서야 정지되었던 브라우저가 글자를 그리던 작업을 마무리하여 마지막 글자가 화면에 보이게 되는 것입니다.
만약 모든 글자를 다 출력시키고 나서 다이얼로그 창이 뜨게 하고 싶으시다면 alert() 함수가 뜨기 전에 약간의 지연 시간을 주시면 됩니다.
즉, 다음과 같이 되어있는 코드를
다음과 같이 변경하시면 됩니다.