[JavaScript] 문법(10) setTimeout() / setInterval()

❑ JavaScript 문법(10) setTimeout() / setInterval()

1. setTimeout(): 일정 시간이 지난 후 함수를 실행

1.1) setTimeout()

// 매개변수가 없는 함수
function tikTok() {
  console.log("tik-tok");
}

setTimeout(tikTok, 3000); // 3초가 지난 후 tikTok 함수를 실행
> "tik-tok"


// 매개변수가 있는 함수
function printName(name) {
  console.log(name);
}

setTimeout(printName, 3000, "citron"); // citron을 매개변수로 넘겨 printName 실행
> "citron"

 

1.2) clearTimeout(): setTimeout 취소

function tikTok() {
  console.log("tik-tok");
}

const toId = setTimeout(tikTok, 3000); 

clearTimeout(toId); // setTimeout(tikTok, 3000) 취소

 

2. setInterval(): 일정 시간 간격으로 함수를 반복

2.1) setInterval()

// 매개변수가 없는 함수
function tikTok() {
  console.log("tik-tok");
}

setInterval(tikTok, 3000); // 3초 마다 tikTok 함수를 반복 실행
> "tik-tok"


// 매개변수가 있는 함수
function printName(name) {
  console.log(name);
}

setInterval(printName, 3000, "citron"); // citron을 매개변수로 넘겨 printName 실행
> "citron"

 

2.2) clearInterval(): setInterval 취소

function tikTok() {
  console.log("tik-tok");
}

const ivId = setInterval(tikTok, 3000); 

clearInterval(ivId); // setInterval(tikTok, 3000) 취소

 

[주의] setTimeout(), setIntervale() 실행 시점

setTimeout과 setInterval 함수의 실행 시점은 script 파일을 전부 읽은 후의 시점이다. 따라서 아래와 같이 0초로 세팅하더라도 "먼저 출력" 문자열이 출력된 후 "tik-tok"이 출력된다.

function tikTok() {
  console.log("tik-tok");
}

const ivId = setTimeout(tikTok, 0); 

console.log("먼저 출력");

> "먼저 출력"

> "tik-tok"