setInterval(콜백함수, 시간) 는
"시간(ms)"을 간격으로 "콜백함수"를 반복 호출 하는 함수이다.
애니메이션 등을 구현하다보면,
잠깐 반복을 중단했다가, 재시작하는 코드를 구현해야할 때가 있다.
방법은 간단하다.
setInterval 함수의 반환값을 변수에 할당해두고,
clearInterval(변수)를 호출하여 반복을 중단하고,
다시 setInterval로 재시작해주면 된다.
# setInterval 중단/재시작 방법
1. setInterval()함수의 반환값을 변수에 할당하여 반복 시작
let 변수 = setInterval(콜백함수, 시간);
2. clearInterval(변수)로 반복 중단
clearInterval(변수);
3. setInterval()함수의 반환값을 변수에 재할당하여 재시작
변수 = setInterval(콜백함수, 시간);
# 샘플 예제 코드
div 태그에 "안녕!" 텍스트를 추가하는 함수를 만들고,
setInterval()을 통해 500ms마다 반복 수행하며,
마우스를 클릭할 때마다 중단/재개 된다.
(중단여부 체크를 위해 toggle 변수를 사용했다)
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<!-- HTML -->
<!-- 1. div 생성 -->
<div id="div"></div>
<!-- Javascript -->
<script>
// 1. 함수: div에 "안녕!" 텍스트를 추가
function text(){
document.getElementById('div').innerText += "안녕!";
}
// 2. setInterval 설정: interval 변수에 할당
let interval = setInterval(text, 500);
// 3. 마우스 클릭시, interval 중단/재시작 구현
let toggle = true;
document.onclick = function(e){
if(toggle){
// 반복 중단
clearInterval(interval);
toggle = false;
}else{
// 반복 재개(재시작)
interval = setInterval(text, 500);
toggle = true;
}
}
</script>
</body>
</html>
<결과물>
'개발(Development) > JS(자바스크립트)' 카테고리의 다른 글
| JS: DOM 이벤트 리스너로 객체의 메소드 연결 시, this가 변경되는 문제 (0) | 2021.06.21 |
|---|---|
| HTML/JS: Audio 객체 음악 파일 제어 및 사운드 재생/정지 방법 (0) | 2021.06.19 |
| VS CODE: JS 함수 주석 문서화하는 방법(자동완성 툴팁 노출) (0) | 2021.05.09 |
| [자바스크립트] 코드 실행 2단계와 변수/함수 생성 과정 (0) | 2021.04.08 |
| [자바스크립트] 콜스택/메모리힙 구조, 데이터 저장/참조 원리 (0) | 2021.04.07 |
댓글