setTimeout Method | clearTimeout Method


Home > Document > JavaScript > Object > Window > Timeout Method

setTimeout Method

setTimeout Method는 실행 내용을 지정하는 시간 후에 한 번 실행하게 하는 Method로서 사용법은 다음과 같습니다.

사용법
TimeoutID = window.setTimeout("실행내용 또는 함수 이름", 1/1000초)

위의 내용중 TimeoutID는 option 으로서 clearTimeout 으로 setTimeout을 해제 시킬 필요가 있을 경우 사용합니다.

입력
<html>
    <head>
        <title></title>
    <script type="text/javascript">
    <!--
    function timeout(){
    setTimeout("alert('3초 후에 경고창이 뜹니다.')", 3000)
    }
    // -->
    </script>
    </head>
    <body>
<button onclick="timeout()">지정 시간 후에 실행 된다.</button>
    </body>
</html>
코드 실행 하기



clearTimeout

clearTimeout은 setTimeout 을 해제 시킵니다. 이 때 위의 설명과 같이 setTimeout 을 지정할 때 TimeoutID가 지정되어 있어야 합니다.

사용법
clearTimeout(TimeoutID)

아래의 예제는 setTimeout과 clearTimeout 을 사용하여 시계를 작동 시켰다 멈췄다하는 예제로서 Date Object 에서의 시계 예제에서 사용한, 지정하는 시간마다 실행하는 setInterval Method의 경우와 달리 setTimeout Method는 함수 내에서 자기 자신을 스스로 호출할 수 있다는 사실입니다.

setTimeout | clearTimeout 예제
<html>
<head>
    <title>setTimeout | clearTimeout</title>
    <script type="text/javascript">
    <!--
    var timer  // clearTimeout으로 해제시킬 TimeoutID 변수 설정
    function startClock(){ 
    var today = new Date() // new keyword로 date 객체 생성
    var strTimer = "현재 시간은"+today.getHours() // 현재 시간을 얻어서 strTimer 변수에 저장
    strTimer += "시" + today.getMinutes() + "분" // 분을 얻어서 strTimer 변수와 문자열 합치기
    strTimer += today.getSeconds() + "초입니다" // 초를 얻어서 strTimer 변수와 문자열 합치기
    
    clock.innerHTML = strTimer 
 /* 1초 후 showTime함수 자신을 스스로 호출 하여 1초 간격으로 반복, 이 부분이 setInterval과 다른 점.
setInterval의 경우 자신을 스스로 호출(어려운 말로 '재귀적 호출' 이라고도 함.)할 수 없다. */
    timer = setTimeout("startClock()", 1000) 
    }

    function stopClock(){
    clearTimeout(timer)  // clearTimeout 으로 setTimeout 해제
    }
    //-->
    </script>
</head>
<body>
    <center>
        <button onclick="startClock()">Start clock</button>
        <button onclick="stopClock()">Stop clock</button>
        <p id="clock"></p>
    </center>
</body>
</html>
코드 실행 하기





이 문서의 저작권은 www.cadvance.org 에 있습니다.

Top
Back
New
검색