setInterval
자바스크립트에서 특정 작업을 일정한 시간 간격마다 반복적으로 실행하도록 설정하는 함수
setInterval(function, milliseconds);
// function: 주기적으로 실행할 함수
// milliseconds: 함수가 실행될 시간 간격을 밀리초(1초 = 1000밀리초)로 지정
사용법
setInterval(() => {
console.log("Hello, World!");
}, 1000); // 1000 밀리초 = 1초콘솔 결과창에서 1초마다 "Hello, World!" 라는 문구가 출력된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>setInterval Example</title>
</head>
<body>
<h1 id="counter">0</h1>
<script>
let count = 0;
setInterval(() => {
count++;
document.getElementById("counter").innerText = count;
}, 1000); // 1초마다 카운터 증가
</script>
</body>
</html>콘솔창에서 1초마다 1씩 카운트 되는 것을 볼 수 있다.
하지만 콘솔창을 종료하지 않는 이상 멈추지 않고 계속 진행되는데
※주의
setInterval을 사용할 때는 종료하지 않으면 무한히 실행되기 때문에 필요할 때 clearInterval을 사용해 멈출 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>setInterval Example</title>
</head>
<body>
<h1 id="counter">0</h1>
<script>
let count = 0;
// setInterval을 변수에 저장
let intervalId = setInterval(() => {
count++;
document.getElementById("counter").innerText = count;
}, 1000); // 1초마다 카운터 증가
// clearInterval 추가
// 10초 후 clearInterval로 멈춤
setTimeout(() => {
clearInterval(intervalId);
console.log("Counter stopped!");
}, 10000); // 10,000밀리초 = 10초
</script>
</body>
</html>코드를 실행하고 10초 뒤에 카운트 동작을 멈추게 할 수 있다.
'JS' 카테고리의 다른 글
| Math : 표준 빌트인 객체 (0) | 2024.10.24 |
|---|---|
| 화살표 함수 (0) | 2024.10.17 |
| 호출 스케줄링 - SetTimeOut (0) | 2024.09.26 |
| 조건문과 반복문 (0) | 2024.09.23 |
| 스프레드 연산자 (...) (0) | 2024.09.20 |