JavaScript (14) # setTimeout / setInterval

setTimeout

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

1.

function fn(){
  console.log(3);
};

setTimeout(fn, 3000);

이 코드는 3초 뒤에 로그를 찍어준다.
두개의 매개 변수를 받는다.

• 첫번째는 일정 시간이 지나면 실행되는 함수
• 두번째는 시간이다. 3초 = 3000

2.

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

또는 이렇게 직접 함수를 전달하지 않고, 직접 코드를 작성해서 사용 할 수도 있다.

3.

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

setTimeout(myName, 3000, '준영');

인수가 따로 필요하다면 시간뒤에 인수를 줄 수도 있다.

4.

const timeID = function myName(name){
	console.log(name);
};

setTimeout(myName, 3000, '준영');
clearTimeout(timeID); // 3초가 지나기 전에 함수가 실행돼서 아무일도 일어나지 않는다!

예정된 작업을 없애주는 함수이며, setTimeout 은 Time Id를 반환하는데, 이것을 이용하여 스케줄링을 취소할 수 있다.

setInterval

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

1.

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

const timeID = setInterval(myName, 3000, '준영');

사용법은 setTimeout 함수와 동일하다.
한번 실행하고 끝나는 것과는 다르게 계속 반복수행한다.
위의 코드는 3초마다 준영 이 콘솔로 찍힐 것이다.

중간에 중단이 하고 싶다면,

clearInterval(timeID)

와 같이 다음의 함수를 실행해주면 된다.

2.

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

console.log(1);

콘솔창에 2 , 1 순서로 찍힐 것 같지만 실제로는 1 이 먼저 찍힌다음에 2 가 찍힐 것이다. (실제로 바로 실행되지 않는다)

이유는 현재 실행중인 스크립트가 종료된 이후에 스케줄링 함수가 실행되기 때문이다. 그리고 브라우저는 기본적으로 4ms 정도의 대기시간이 있기 때문이다. 따라서 0이라고 적어도 대기시간 이후에 콘솔이 찍힐 수 있다.