본문 바로가기
Frontend/JavaScript

JavaScript의 내장함수 : 타이머함수

by 코딩쥐 2024. 8. 4.

타이머함수

함수명 설명
setTimeout(function, millisecond) 일정 시간이 지난 후 함수를 한번 실행한다.
clearTimeout(id) 일정 시간이 지난 후 함수를 한 번 실행하는 것을 중지한다.
setInterval(function, millisecond) 일정 시간마다 함수를 반복해서 시행한다.
clearInterval(id) 일정 시간마다 함수를 반복하는 것을 중단한다. 

 

See the Pen setTimeout by coding-ji (@coding-ji) on CodePen.

위의 예제에서 let val1 = setTimeout(writeHello, 1000);으로 설정하고 clearTimeout(val1);을 시행하면 setTimeout이 시행되지 않는 모습을 볼 수 있다. 

 

<<clearTimeout 예제>>

더보기
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function writeHello(){
            let text = document.createElement("p");
            text.textContent = "안녕하세요"
            document.body.append(text);
        }

        let val1 = setTimeout(writeHello, 1000);
        clearTimeout(val1);
    </script>
</body>

</html>

아래의 예제는 setInterval함수를 사용해서 1초마다 함수를 반복해서 시행한 예제이다. 아래 코드에서 clearInterval();을 삭제하면 1초마다 "안녕하세요"가 작성되는 것을 볼 수 있다.

See the Pen setInterval by coding-ji (@coding-ji) on CodePen.