setTimeout / setInterval

인프런 강의 자바스크립트 중급 - 코딩앙마 를 듣고 정리한 내용입니다.

setTimeout 은 일정 시간이 지난 후 함수를 실행시키고 setInterval 은 일정 시간 간격으로 함수를 반복합니다.

function fn(){
	console.log(3)
}
setTimeout(fn, 3000);

// 3000은 3s 초를 의미합니다. 3초 후 로그를 찍습니다.
// setTimeout 은 두개의 매개변수를 받습니다.
// 첫번째는 일정 시간 뒤 실행될 함수, 두번째는 시간입니다.

위 코드는 아래처럼 써도 됩니다. 함수를 전달하지 않고 직접 코드를 넣어도 동일하게 동작합니다.

setTimeout(function(){
	console.log(3)
}, 3000);

인수가 필요하다면 시간 뒤에 넣어줍니다.

function showName(name){
	console.log(name);
}
setTimeout(showName, 3000, 'Mike');

위 함수가 const tId = function.. 로 할당되었으때 clearTimeout(tId); 를 하면 실행이 취소됩니다.

setInterval 은 setTimeout 과 비슷하게 써주면 됩니다. 대신 해당 시간마다 반복해서 실행됩니다.

function showName(name){
	console.log(name);
}
const tId = setInterval(showName, 3000, 'Mike');

// 멈추고 싶다면 아래 코드로
clearInterval(tId); 

브라우저는 기본적으로 4ms~ 정도의 대기 시간이 있습니다. 딜레이 시간을 0을 넣어도 아래 코드가 먼저 실행됩니다.

setTimeout(function(){
	console.log(2)
}, 0); // 딜레이 시간을 0을 주어도 아래 식이 먼저 실행된다.
console.log(1);

유저가 접속하면 접속한지 얼마나 지났는지 보여주는 코드를 짜보면,

let num = 0;
function showTime(){
	console.log(`안녕하세요. 접속하신지 ${num++}초가 지났습니다.`);
}
setInterval(showTime, 1000)

// 5초 동안만 보여주고 싶다면 아래처럼 수정

let num = 0;
function showTime(){
	console.log(`안녕하세요. 접속하신지 ${num++}초가 지났습니다.`);
	if(num > 5){ // 5 이상이 되면
		clearInterval(tId); // 반복을 멈춘다.
	}
}
cosnst tId = setInterval(showTime, 1000)