[자바스크립트 중급] 함수 스케줄링 setTimeout / setInterval / clearTimeout / clearInterval

0. 들어가며

- 브라우저는 출력까지 기본적으로 4ms 정도의 대기시간이 있다.

 

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

- setTimeout(콜백함수, 시간, 인수) // 매개변수 기본은 두개 (콜백함수, 시간)

- 함수에 '인수'가 필요하다면 시간 뒤에 작성해준다.

- 시간은 ms 단위 // 3000은 3초를 의미한다.

- 시간은 0으로 적어도 바로 실행 안됨. // 현재 실행중인 스크립트가 종료된 이후 스케줄링 함수를 실행 함.

// setTimeout : 일정시간이 지난 후 함수 실행

function hello(){

    console.log("hello")

}

setTimeout(hello, 3000); // 3초후 hello 출력 (처리 속도에 따라 차이있음)

// 이렇게 써도 됨

setTimeout(()=>{console.log("hi")}, 3000) // 3초후 hi 출력 (처리 속도에 따라 차이있음)

// 인수가 필요하면 매개변수 시간 뒤에 넣어준다.

function sayName(name){

    console.log(`my name is ${name}`)

}

setTimeout(sayName, 3000, "Crong"); // 3초후 출력 (처리 속도에 따라 차이있음)

 

 

2. cleatTimeout(tId 티아이디) : 예정된 셋타임 작업을 취소

- setTimeout 함수를 변수로 묶으면 timeID 즉, tId가 되는데 그걸 매개변수에 넣음.

// clearTimeout(tId) : 예정된 작업 실행 전에 취소

function hello(){

    console.log("hello")

}

const sayHello = setTimeout(hello, 3000); // 셋타임 함수를 변수로 묶어 id 반환

clearTimeout(sayHello); // 아무일도 일어나지 않았다.

 

 

3. setInterval : 일정한 시간(인터벌)마다 함수를 반복

- 셋타임아웃과 실행방식이 동일하다. (단, 시간 마다 반복됨)

- setInterval(콜백함수, 시간, 인수) // 매개변수 기본은 두개 (콜백함수, 시간)

- 함수에 '인수'가 필요하다면 시간 뒤에 작성해준다.

// setIntetval : 일정 시간(인터벌)마다 함수 반복

const sayName = setInterval((name) => {

    console.log(`My name is ${name}`)

}, 1000, "Tom") // 중지 전까지 무한 반복

 

 

4. clearInterval(iID) : 인터벌 작업을 중지

- setInterval(iID) 함수를 변수로 묶으면 intervalID가 되는데 그걸 iID 매개변수로 넣는다.

// setIntetval : 일정 시간(인터벌)마다 함수 반복

let sec = 0; // sec은 숫자 0으로 정의해주고

function callSec() {

    console.log(`시작한지 ${sec++}초 지남`)

    if (sec > 10) {

        clearInterval(secMaker);

    }

}

const secMaker = setInterval(callSec, 1000); // 셋인터벌 함수를 변수로 묶어 줘야 클리어인터벌이 작동

 

 

4-1. 중지했던 인터벌을 다시 가동

- 방법은 id 변수에 다시 담아주면 됨.

- 이때, 변수에 재할당하는 것이니 id는 let으로 선언되어야 함. (const는 재할당 안됨)

// setIntetval : 중지했다가 다시 반복하기

function sayName(name) {

    console.log(`name is ${name}`)

}

let nameMaker = setInterval(sayName, 1000, "cole");

clearInterval(nameMaker);

nameMaker = setInterval(sayName, 1000, "pole"); // name is pole 반복