setTimeout

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

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

이 코드는 3초 후에 로그를 찍어준다. setTimeOut함수는 두 개의 매개변수를 받는다. 1번째에는 일정시간이 지난 후에 실행해주는 함수이고, 두번째는 시간이다. 3000은 3s를 의미한다.

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

또한 이렇게 사용할 수 있다.

function showName(name){
	console.log(name); // 'Mike'
}
setTimeout(showName, 3000, 'Mike');
// setTimeout(함수, 시간, 인수);

만약 인수가 필요하다면 시간 뒤에 해당 값을 넣어주면 된다.

clearTimeout()

예정된 작업을 없애는 메소드이다.

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

3초가 지난 후에 실행되는 코드이기 때문에 clearTimeout()을 사용하면 아무런 일도 일어나지 않는다

setInterval

일정 시간 간격으로 함수를 반복

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

setInterval은 setTimeout과 사용법이 동일하다. 한번 실행하고 끝나는 setTimeout달리 계속 반복해서 실행되어진다. 3초마다 'Mike'가 찍히게 된다.
중간에 중단하고 싶다면 clearInterval()을 실행하면 된다.

---

setTimeout(function() {
  console.log(2);
}, 0)

console.log(1);

한가지 주의사항이 있다! delayTime을 0으로 주어도 바로 실행되어지지 안않기때문에 console.log(1)이 실행되어진 후 console.log(2)가 출력되어진다.

---

출처)