[JavaScript] 시간 지연 함수과 시간 반복 함수 setTimeout, setInterval

 

Javascript에서는 특정 시간이 지난 후

이벤트가 호출되도록하는 함수와

특정 시간마다 반복이 되게하는 함수가

있습니다.

 

이벤트를 반복하거나 일정시간을

지연하고 실행해야 되는경우가

간혹 생기는데 이런 경우 사용할 수 있습니다.

 

각 함수는 setTimeout과 setInterval입니다.

해당 함수를 사용하는 방법에 대해서

간단하게 알아보도록 하겠습니다.

 

 

 

 

 

• 시간 지연 함수 setTimeout

---

setTimeout(function() { // setTimeout 함수
  console.log(1); // 실행 할 이벤트
}, 5000); // 5000ms -> 5초

// 5초 뒤
// 결과 1

---

 

setTimeout 함수는 일정 시간을 지연한 뒤

함수 안에 있는 이벤트를 실행하는 함수입니다.

위의 예제와 같이 사용하는 방법은

setTimeout(function() { [이벤트] }, [시간] );

입니다.

시간이라고 표기하였지만 ms(밀리세컨드) 단위로

예로 1000이면 1초입니다.

 

위의 예제에서는 5000ms, 즉 5초 뒤

setTimeout 함수안에 있는

console.log가 실행되어 5초뒤 1이라는

결과값이 찍히는 것을 확인할 수 있습니다.

 

 

• 시간 반복 함수 setInterval

---

setInterval(function() { // setInterval 함수
  console.log(1); // 실행 할 이벤트
}, 1000); // 1000ms -> 1초

// 1초 마다
// 결과 1

---

 

setInterval 함수는 일정 시간마다 반복되는

함수입니다.

setTimeout와 형태는 비슷하며,

setTimeout함수는 한번만 실행된다면

setInterval 함수는 반복되는 함수입니다.

 

사용 방법은

setInterval(function) { [이벤트] }, [시간] );

입니다.

역시 시간으로 표현했지만 ms(밀리세컨드) 단위입니다.

 

위의 예제는 1000ms, 1초마다

setInterval 함수안에 있는

console.log가 실행되어 1초마다

결과값 1이 반복되어 찍히는 것을 확인할 수 있습니다.

 

조금 다른 점은 함수를 변수에 담아

clearInterval함수로 반복되는 것을

종료할 수 있습니다.

사용 방법은

clearInterval([변수]) 입니다.

 

예제를 통해 실제 사용되는 방법에

대해서 간단히 알아보겠습니다.

 

 

 

 

• 시간 반복 함수 setInterval & clearInterval

---

    var timer = 0; // 0이 할당된 변수 선언 timer
    
	var interval = setInterval(function() { // setInterval 함수
		
		timer++; // timer를 1씩 증가
		console.log(timer);

		if (timer == 3) // timer가 3이 되면..
		{
			console.log('종료'); 
			clearInterval(interval); // clearInterval 함수로 반복 종료
		}
	}, 1000); // 1초마다 반복
    
    // 1초 마다
    // 결과 1
    // 결과 2
    // 결과 3
    // 결과 종료

---

위의 예제처럼 1초마다 반복하다가

clearInterval 함수로 특정한 조건일 때

반복되는 함수를 종료할 수 있습니다.

 

위의 예제들을 확인하여 자신이

사용하고 싶은 부분에서 조금씩 변경하여

기능을 활용하시면 되겠습니다.

 

 

 

 

※ 관련 포스팅

 

2018.12.16 - [Programing/JavaScript] - 자바스크립트 alert(경고창), confirm(선택창), prompt(입력창) 사용 방법

2020.05.02 - [Programing/JavaScript] - [JavaScript/자바스크립트] Switch Case 문 예제로 배워보기

2022.09.20 - [Programing/JavaScript] - [JavaScript] 삼항연산자란? 삼항연산자 조건문 사용방법