티스토리 뷰
안녕하세요. 이번 포스팅에서는 웹브라우저 환경에서 자바스크립트 코드를 작성할 때 써먹을 수 있는 유용한 메소드, setInterval과 clearInterval에 대해서 간단히 정리해보도록 하겠습니다.
setInterval
setInterval 메소드는 일정한 시간 간격마다 함수를 반복 실행할 수 있도록 해주는 타이머 메소드입니다. 사용 방법은 아래와 같습니다.
|
1
|
setInterval(반복_실행할_함수, 반복_주기_ms_단위로);
|
보이는 바와 같이 메소드의 첫 번째 인자로는 반복 실행하고자 하는 함수를, 두 번째 인자로는 반복 실행할 주기를 정수 값으로 전달해주면 됩니다. 이 때 주기는 미리세컨즈(ms) 단위입니다. 다음은 실제 사용 예입니다.
|
1
2
3
|
setInterval(function(){
console.log("콘솔에 반복해서 출력할거다~!")
}, 500);
|
위 코드는 콘솔에 문자열을 출력하는 함수를 500ms, 즉 0.5초마다 호출하겠다는 의미입니다. 위와 같이 setInterval을 호출해 반복 실행 타이머를 등록하게 되면, 웹브라우저가 실행되는 동안 계속해서 함수를 반복 실행합니다.
clearInterval
clearInterval 메소드는 setInterval을 통해 등록된 반복 실행 타이머의 동작을 취소(제거)할 수 있는 메소드입니다. 여기에는 setInterval을 통해 등록된 반복 실행 타이머의 ID가 전달되는데, 동작 흐름은 다음과 같습니다.
|
1
2
3
4
5
6
7
8
9
10
|
let timerID; // 반복 실행 타이머의 ID를 저장할 변수
// setInterval은 0이 아닌 숫자를 반환한다!
timerID = setInterval(function(){
console.log("콘솔에 반복해서 출력할거다~!")
}, 500);
// 해당 숫자를 반환한 반복 실행 타이머의 동작을 취소한다!
clearInterval(timerID)
|
4행에서는 변수 timerID에 setInterval로부터 반환되는 값을 대입하고 있습니다. setInterval 메소드는 반복 실행 타이머를 등록하면서 타이머의 ID를 반환한다는 특징이 있습니다.
10행에서는 clearInterval 메소드를 호출하면서 timerID 변수를 인자로 전달하고 있습니다. clearInterval은 전달받은 ID에 해당하는 반복 실행 타이머를 클리어, 즉 제거하는 기능을 수행하므로 10행의 코드가 실행된 이후로는 더 이상 콘솔에 문자열이 출력되지 않습니다.
예제
마지막으로 관련 예제를 하나 보이면서 포스팅을 마무리하겠습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SETINTERVAL</title>
</head>
<body>
<h1 style="font-size: 60px;">0</h1>
<script>
let seconds = 1;
let timerId;
timerId = setInterval(function(){
document.querySelector("h1").textContent = seconds++;
if(seconds > 5){
clearInterval(timerId)
}
}, 1000);
</script>
</body>
</html>
|
위 예제는 브라우저 화면에 h1 태그를 통해 숫자를 표시하는 예제입니다. 스크립트에서는 1000미리초, 즉 1초마다 숫자를 증가시켜 표시되는 숫자를 바꿔줍니다. 그러다 숫자가 5를 넘어가게 되면 clearInterval을 호출하여 반복 실행을 멈춥니다. 결과적으로 h1 태그는 5까지만 증가하고 이후로는 멈춰있게 됩니다.
'IT > 프로그래밍' 카테고리의 다른 글
| [JavaScript DOM] textContent innerText 차이 (0) | 2021.05.11 |
|---|---|
| 자바스크립트 스톱워치 만들기 (3) | 2021.04.29 |
| 자바스크립트 디지털 시계 만들기 (0) | 2021.04.10 |
| HTML 이미지 : img 태그 src url 지정하는 방법 (1) | 2021.04.08 |
| VSCODE 리액트 자동완성 기능 설정하기 (feat. user snippets) (0) | 2021.03.26 |