setTimeout, setInterval

• setTimeout : 일정 시간이 지난 후 함수를 실행
• setInterval : 일정 시간 간격으로 함수를 실행

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

function fn() {
console.log("실행되고 3초 지났음");
}

setTimeout(fn, 3000);

// 다른 방법
setTimeout(function() {
	console.log("위의 함수와 같게 동작합니다");
},3000);

setTimeout은 2개의 매개변수를 받습니다. 함수와 시간, 시간의 경우 3000은 3초를 뜻합니다.
해당 시간 이후에 해당 함수를 동작시키는 역할 입니다.

만약에 인수가 필요할 경우 아래와 같이 코드를 작성합니다.

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

setTimeout(showName, 3000, 'Mike'); 
//Mike가 매개변수 name으로 인식됩니다. 

clearTimeout(tId) 는 예정된 작업을 없앱니다.
setTimeout은 time id를 반환합니다. 위의 클리어 타임아웃을 이용하면 작업을 삭제할 수 있습니다.

setInterval : 일정 시간 간격으로 함수를 실행

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

const tId = setInterval(showName, 3000, 'Mike')

위의 코드가 실행되면 3초마다 name을 찍어줄 것 입니다. 이 동작을 멈추기 위해서는 clearInterval(tId); 를 사용하면 멈출 수 있습니다.

주의사항

딜레이 시간을 정할 때 0 이라고 정해도 즉시 동작하는 것은 아닙니다. 브라우저 기본 딜레이 시간도 있고, 기본적으로 스크립트는 현재 실행 중인 것을 마치고 스케쥴 스크립트를 진행하기 때문입니다.

let num = 0;

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

const tId = setInterval(showTime,1000)

위의 코드는 5초간 setInterval 동작 하도록 만들어진 코드 입니다.