Javascript 특정 시간마다 반복 setInterval, setTimeout

Javascript 특정 시간마다 반복 setInterval, setTimeout

 

이번 포스팅에서는 Javascript에서 특정 시간마다 반복할 수 있는 기능인

setInterval과 setTimeout에 대해서 알아보도록 하겠습니다.

 

setInterval

setInterval은 window 메서드로, 매개변수인 시간만큼 함수를 반복 하는 기능을 합니다.

[argument1, argument2..] 는 옵션이고 전달되는 함수의 매개변수로 사용됩니다.

 

문법)

const intervalId = setInterval(function(arg1, arg2..){}, milisecond, [argument1, argument2...]);

 

setInterval 사용 예제)

const testFunc = function(a, b){
    console.log(a, b);
}
const intervalId = setInterval(testFunc, 3000, "안녕하세요.", "알짜배기프로그래머 입니다.");

위의 예제의 코드가 실행되는 시점부터 3초 간격으로 testFunc 무한 실행되게 됩니다.

코드 실행되는 시점에 바로 실행되는 것이 아니고, 3초 후 부터 반복되는 것에 주의하세요.

"안녕하세요." 가 a 매개변수로, "알짜배기프로그래머 입니다."가 b 매개변수로 전달되어 console에 출력됩니다.

 

setInterval 중지 예제)

setInterval 을 중지하기 위해서는 clearInterval 메서드를 사용하며

setInterval 실행 시 리턴받은 intervalId를 매개변수로 전달해주어야 합니다.

const testFunc = function(a, b){
    console.log(a, b);
}
const intervalId = setInterval(testFunc, 3000, "안녕하세요.", "알짜배기프로그래머 입니다.");
	
setTimeout(function(){
    clearInterval(intervalId);
}, 6000);

 

setTimeout은 특정 시간 이후에 한번만 실행시키는 메서드 입니다.

6초 후 clearInterval를 실행하며 더 이상 반복되지 않도록 합니다.

setTimeout은 아래서 다시 설명하도록 하겠습니다.

 

setTimeout

setTimeout은 매개변수로 전달된 시간 이후에 한번만 실행하는 함수 입니다.

 

문법)

const timeoutId = setTimeout(function(arg1, arg2..){}, milisecond, [argument1, argument2...]);

setTimeout의 문법은 setinterval과 동일합니다.

 

setTimeout 사용 예제)

const testFunc = function(a, b){
    console.log(a, b);
}
const timeoutId = setTimeout(testFunc, 3000, "안녕하세요.", "알짜배기프로그래머 입니다.");

setInterval 과 다르게 3초 후 한번만 콘솔에 출력합니다.

 

setTimeout 중지 예제)

const testFunc = function(a, b){
    console.log(a, b);
}
const timeoutId = setTimeout(testFunc, 3000, "안녕하세요.", "알짜배기프로그래머 입니다.");

clearTimeout(timeoutId);

콘솔에 아무것도 출려되지 않습니다.

 

응용

특정 시간마다 값을 바꿔가며 함수 실행을 반복하는 예제)

특정 시간마다 값을 바꿔가며 함수 실행을 반복하기 위해서는 setTimeout과 재귀함수를 활용합니다.

 

let idx = 0;
const texts = ["안녕하세요.", "알짜배기 프로그래머 입니다."];
const repeatFunc = function(){
    setTimeout(function(){
        console.log(texts[idx]);
	    setTimeout(function(){
	        idx += 1;
	        if(idx == texts.length){
	            idx = 0;
	        }
	        repeatFunc();
	    }, 3000);
	}, 3000);
}
repeatFunc();

배열에 들어있는 텍스트를 반복적으로 출력하는 코드 입니다.

repeatFunc가 실행되면 3초 후에 콘솔이 출력되고 3초 후 idx를 변경 후 repeatFunc을 재귀호출 하게 됩니다.

코드가 실행되면 "안녕하세요." 와 "알짜배기 프로그래머 입니다."  가 반복되며 출력되는 것을 확인하실 수 있습니다.

setTimeout의 매개변수인 millisecond 를 전역, 혹은 클래스변수로 사용하면 시간을 변경하면서 반복할 수 있습니다.

 

Link : https://aljjabaegi.tistory.com/207

javascript setInterval(), setTimeout(), clearInterval() 자바스크립트 타이머 구현 일정시간마다 특정기능

 

Link : https://aljjabaegi.tistory.com/423

Javascript setInterval, clearInterval 함수의 즉시 종료에 대한 고찰, 해결방법 사용법