Whiteship's Note

JavaScript Timing Events

AJAX/JavaScript : 2007.07.10 11:29


참조 : http://www.w3schools.com/js/js_timing.asp

자바스크립트 타이밍 이벤트

자바스크립트를 사용해서, 특정 코드를 함수가 호출 됐을 때 즉시 호출하지 않고 일정 타임 후에 실행하도록 할 수 있습니다. 이것을 타이밍 이벤트라고 합니다.

자바스크립트로 타이밍을 다루는 것은 매우 간단합니다. 다음 두 개의 핵심 메소드를 사용하면 됩니다.
    * setTimeout() - 특정 코드를 특정 밀리초 후에 실행합니다.
    * clearTimeout() - setTimeout()을 취소합니다.

주의: setTimeout() 과 clearTimeout()은 둘 다 HTML DOM Window 객체의 메소드 입니다.

setTimeout()

문법
var t=setTimeout("javascript statement",milliseconds)

setTimeout() 메소드가 반환하는 값 - 위 문장에서 리턴 값은 t라는 변수에 저장됩니다. 만약 setTimeout()을 취소하고 싶을 때 이 변수명을 참조할 수 있습니다.

setTimeout()의 첫 번째 인자는 자바스크립트 문장입니다. 따라서 "alert('5 seconds!')" 또는 "alertMsg()"같은 함수 호출이 될 수 있습니다.

두 번째 인자는 몇 밀리초 후에 첫 번쨰 인자에 있는 문장을 실행하길 원하느냐 입니다.

Note: There are 1000 milliseconds in one second.
주의: 1000 밀리초가 1초 입니다.

예제

아래의 예제는 버튼을 클릭하면 5초 후에 경고창이 뜨게 됩니다.

more..


예제

타이머를 무한 루프 돌리려면, 함수가 자기 자신을 호출하도록 하면 됩니다. 아래의 예제에서 버튼을 클릭하면 필드 값이 0부터 시작하여 무한대로 증가하게 됩니다.

more..


clearTimeout()

문법
clearTimeout(setTimeout_variable)

예제

아래의 예제는 위의 "무한 루프" 예제와 같습니다. 단 하나 차이는 "Stop Count!" 버튼을 클릭하여 멈출 수 있다는 것입니다.

more..




'AJAX > JavaScript' 카테고리의 다른 글

1장~6장 정리  (0) 2008.04.04
자바스크립트 튜토리얼 정리 끝  (4) 2007.07.10
JavaScript Create Your Own Objects  (0) 2007.07.10
JavaScript Timing Events  (0) 2007.07.10
JavaScript Animation  (2) 2007.07.09
JavaScript Form Validation  (2) 2007.07.09
JavaScript Cookies  (0) 2007.07.09
JavaScript Browser Detection  (0) 2007.07.09
JavaScript HTML DOM Objects  (2) 2007.07.09
JavaScript Math Object  (0) 2007.07.09
JavaScript Boolean Object  (0) 2007.07.09
top




: 1 : 2 : 3 : 4 : 5 : 6 : 7 : 8 : ··· : 30 :