setTimeout / setInterval - 자바스크립트 중급 강좌 #12

자바스크립트 중급 강좌 #12 setTimeout / setInterval

 

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

- 첫번째 매개변수로 함수를 받는다. (함수는 왼쪽 예시처럼 선언된 함수를 전달해줄 수도 있고, 직접 그 안에서 코드를 작성해줘도 된다)

- 두번째 매개변수로는 시간을 받는다.

- setTimeout(fn, 3000);

3초 뒤에 첫번째 인자로 들어온 함수가 실행된다는 의미이다.

setTimeout 콜백 함수에 인자 전달

- setTimeout의 첫번째 인자로 들어온 함수에 인자가 필요하다면 세번째 인자에 적어줌으로써 전달해줄 수 있다.

- setTimeout(showName, 3000, 'Mike');

3초 뒤에 showName 함수를 실행하는데, 이때 showName 함수의 인자로 'Mike'를 전달한다.

clearTimeout(tId) : 예정된 작업을 없앤다.

- setTimeout이 반환한 time ID을 clearTimeout에 넣어주면 3초 뒤에 예정된 setTimeout 작업이 취소되어 아무 일도 일어나지 않는다.

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

- 사용법은 setTimeout과 동일하다. 단, setTimeout은 한번만 수행하고 끝나지만 setInterval을 반복해서 수행한다.

- 위와 같은 예시에서는 3초마다 showName 함수가 실행되기 때문에, 3초마다 콘솔에 'Mike'가 찍힌다.

- 작업을 중단하고 싶을 때 clearInterval(tId)로 작업을 중단할 수 있다.

0초 뒤에 실행하는 setTimeout은 어떻게 동작할까?

- 0초 뒤에 함수가 실행된다는 의미이므로 콘솔에 2가 먼저 찍히고 그 다음 1이 찍힐 것처럼 보이지만 실제 실행해보면 1이 먼저 찍히고 그 다음 2가 찍힌다.

- 그 이유는 자바스크립트 자체의 특징 때문이다. 자바스크립트는 스크립트 함수를 먼저 실행하고 setTimeout 와 같은 스케줄링 함수는 뒤로 미뤄놨다가 스크립트 함수들이 모두 실행 완료되면 그제서야 스케줄링 함수를 실행시킨다. 이 때문에 0초라고 하더라도 스케줄링 함수이므로 우선순위는 스크립트 함수보다 뒤로 밀리게 되고 스크립트 함수가 완료된 후에야 실행된다. 그러므로 위 예시에서는 2,1 순서가 아니라 1,2 순서로 찍히게 된다.

- 그리고 사실상 브라우저는 4ms 만큼의 대기 시간이 있기 때문에 실질적으로 콘솔에 찍히는 시간 또한 0초라고 할 수 없다.

매초마다 접속 경과 시간 표시하기

- 1초마다 setInterval 함수가 실행되므로 0초부터 시작해서 1,2,3,4,... 매초 콘솔에 메세지가 찍히게 된다.

- 중단하는 코드가 없기 때문에 계속해서 실행된다.

5초까지만 접속 경과 시간 표시하기

- setInterval 함수가 반환하는 tId를 인자로 받은 clearInterval은 해당 setInterval 함수를 중단할 수 있는 함수이다.

- 5초까지만 실행하고 5초 이후부터는 중단할 것이기 때문에 if (num > 5) 이라는 조건을 걸어주고 이 안에 중단하는 코드를 적어주면 된다.