setTimeout / setInterval

📌 setTimeout

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

function fn () {
    console.log(“3초 후 찍힙니다.“);
}

setTimeout(fn, 3000); // 3초 후 로그 찍힘

• setTimeout은 두개의 매개변수를 받는다.
• 첫 번째는 일정 시간이 지난 후 실행하는 함수.
• 두 번째는 시간이다.

📍 위의 예시 코드는 아래와 완벽하게 동일하게 작동한다.

setTimeout(function () {
    console.log(“3초 후 찍힙니다.”);
}, 3000)

📍 인수는 시간뒤에 넣어 줄 수있다.

function showName(name) {
    console.log(name);
}

setTimeout(showName, 3000, “Mike”); // 3초 후, “Mike”

• 위와 같이 인수가 필요하면 시간뒤에 넣어준다.
• “Mike”는 showName 함수의 첫 번째 인수로 전달된다.

📌 clearTimeout(tId)

: 예정된 작업을 취소

let num = 0;

function showTime () {
     console.log(`접속 후 ${num} 초가 지났습니다`);
     if (num > 5) {
         clearTimeout(tId);
     }
}

const tId = setInterval(showTime, 1000);

📌 setInterval

: 사용법은 setTimeout과 같으나 지정된 시간이 지나고 끝내지 않고 함수를 반복한다.

function showAge (age) {
    console.log(age);
}

const tid = setInterval(showAge, 1000, 3); // 1초에 한번씩 3이 찍힌다.

💡 주의사항:

setTimeout(function() {
    console.log(“Hi”);
}, 0)

console.log(1);

• 시간 값이 0이어도 console.log(Hi)보다 console.log(1)이 먼저 실행된다.
• 이유는 현재 실행중인 함수가 모두 종료된 후 스케줄링 함수가 실행되기 때문이다.
• 브러우저에는 기본적으로 4ms 정도의 지연시간이 있다.