JavaScript 고급 튜토리얼(3과, 2부) 페이지 1/2_기본 지식

타이머가 루프에서 작동하도록 하려면 루프 호출을 구현하는 함수를 작성해야 합니다. 예는 다음과 같습니다.

var the_count = 0;
var the_timeout;
function doTimer()
{
window.document.timer_form.the_text.value = the_count;
> the_count = 2;
the_timeout = setTimeout("doTimer();", 2000);
}

여기서 사용한 타이머는 이전 페이지에서 사용한 타이머입니다. 이 함수는 사용자가 버튼을 클릭할 때 호출됩니다. 이 함수는 the_count의 현재 값을 텍스트 상자에 씁니다. 그런 다음 the_count가 2만큼 증가하고 함수 자체가 호출됩니다. the_count가 2만큼 증가하면 텍스트 상자의 값도 그에 따라 업데이트됩니다. 함수 자체가 다시 호출됩니다. 2초 동안 기다리는 동안 브라우저는 다른 동기화 작업을 수행할 수 있습니다. the_count가 2만큼 증가하자마자 또 다른 setTimeout()이 실행됩니다. 주어진 시간에 단 하나의 setTimeout()만 실행되므로 메모리 손상에 대해 걱정할 필요가 없습니다.

무한 "while" 루프는 브라우저의 작업을 잠그며 루프가 실행되는 동안 브라우저는 동시에 다른 명령을 실행할 수 없습니다. 그리고 setTimeout을 사용하면 브라우저가 루프의 간격 동안 다른 작업을 수행할 수 있습니다.

setTimeout을 취소하는 방법은 무엇입니까?

이제 무한 루프를 설정하는 방법을 배웠습니다. 하지만 그 순환을 멈추는 방법을 알아야 합니다. 해당 명령은clearTimeout입니다. 위의 예에서 타이머에는 다음과 같은 양식 요소도 있습니다.

타이머를 종료하려면 이 버튼을 클릭하세요. 명령은clearTimeout()인데 실제로는 매우 간단합니다. setTimeout을 이렇게 설정하면 the_timeout = setTimeout("some javascript",3000);

다음과 같이 타이머를 취소할 수 있습니다. ;

꽤 간단하죠? 다음으로 시간을 보고할 수 있는 타이머인 복잡한 루프 타이머를 살펴보겠습니다.