[JavaScript] setInterval(),clearInterval(), setTimeout() 사용법

JavaScript의 타이머를 사용하는 내장함수인 setInterval(),clearInterval(), setTimeout()에 대해서 알아보자!

 

---

▶ setInterval (함수, 초)

 각 호출 사이에 고정된 시간 지연으로 함수를 반복적으로 호출하거나 코드 스니펫을 실행 (주기적으로 인자를 실행하는 함수)

 

- setInterval() 함수는 어떤 코드를 일정한 시간 간격을 두고 반복해서 실행하고 싶을 때 사용한다.

- 첫번째 인자로 실행할 코드를 담고 있는 함수를 받고, 두번째 인자로 반복 주기를 밀리초(ms) 단위로 받는다.

- 간격(interval)을 고유하게 식별할 수 있는 interval ID를 반환(숫자값)하므로 나중에 clearInterval() (en-US) 함수를 호출하여 제거할 수 있다.

 

[예제]

- 간단예제

//Hello!라는 문자열을 콘솔에 3초에 1번씩 실행
1.
function test() {
  console.log("Hello!");
}
setInterval(test, 3000);


******************************
2.
setInterval( () => console.log('Hello!'), 3000);

 

- 함수에 인자가 있을 경우

function test(string) {
  console.log(string);
}

setInterval(function() {
  test("Hello!");
}, 3000);

 

- 여러함수로 설정할 경우

function test1(string) {
  console.log("test1 : " + string);
}

function test2(string) {
  console.log("test2 : " + string);
}

setInterval(function() {
  test1("Hello!");
  test2("World!");
}, 3000);
//위와 같이 setInterval 함수 안에 함수를 인자로 넣고 실행하면 두개의 함수가 3초에 한번씩 실행됨

*** 결과  ****
test1 : Hello! test2 : World! test1 : Hello! test2 : World!

 

- 조건문 사용할 경우

function test(string) {
  console.log(string);
}

setInterval(function() {
	if("Y" == "Y" ) {
  		test("Hello!");
  	}
}, 3000);

---

▶clearInterval( intervalID )

이전에 설정된 시간 제한 반복 작업을 취소하는 함수

제공된 매개변수(intervalID=작업식별자)가 이전에 설정된 작업을 식별하지 않는 경우 이 메서드는 아무 작업도 수행하지 않는다.

 

[예제]

- 간단한 예제

var interval = setInterval(function() {
  console.log("Interval");
}, 1000);

//인자로 함수 이름 넣어준다.
clearInterval(interval);

 

-응용 예제

var interval = setInterval(function() {
  count++;
  if (count === 10) {
    clearInterval(interval);
  }
}, 3000);

---

▶setTimeout(함수, 초)

 일정시간이 지난 후 인자로 받은 함수를 한번 실행해주는 함수

 

- 첫번째 인자로 실행할 코드를 담고 있는 함수를 받고, 두번째 인자로 지연 시간을 밀리초(ms) 단위

- 함수 실행 후 return 값으로 상수를 리턴합니다(1). 함수 실행 때 마다 1씩 추가되어 리턴됨

- 타임아웃 아이디(Timeout ID)라고 불리는 숫자를 반환

 

[예제]

-간단 예제

setTimeout(() => console.log("3초 후에 실행됨"), 3000);

 

//5초 후에 oneTime이라는 string를 콘솔에 1번 찍고 종료
setTimeout(function() {
  console.log("oneTime");
}, 5000);

self.scrollState = false;
if (!self.scrollState) {
  self.mainElem.classList.add("running");
}
self.scrollState = setTimeout(function() {
  self.mainElem.classList.remove("running");
}, 500);
//setTimeout이 실행되면 상수를 리턴 함으로 true로 바뀐다.

-응용예제

function add(x, y) {
  console.log(x + y);
}
setTimeout(add, 2000, 3, 4);


************
결과 : 7