setTimeout 함수는 일정 시간 뒤에 함수나 지정된 코드를 실행하는 타이머를 설정합니다. 우선 간단한 함수를 하나 만든 뒤에 setTimeout 함수를 통해 실행시켜 기능을 확인해봅시다.
const funcTime=() => {console.log('go!');}
setTimeout(funcTime , 3000);
위 코드는 'go!'라는 문자열을 3초 뒤에 콘솔에 출력하는 함수입니다. setTimeout 함수안에 funcTime 함수를 첫 번째 인자로, 그리고 3000의 숫자를 두 번째 인자로 집어넣었는데요, 이 의미는 setTimeout 함수를 실행하는 시점에서 3000 밀리 세컨드(1000분의 1초, 즉 3000 밀리 세컨드는 3초) 뒤에 funcTime 함수를 실행하겠다는 의미입니다. 이제 코드를 실행해 봅시다! 정확히 3초 뒤에 콘솔 창에 'go!' 가 찍히는 것이 보일 겁니다. 그런데 3초가 흐르기 전에 어떤 숫자가 반환되지 않으셨나요?! 이 숫자의 정체는 뒤에서 밝혀집니다 :)
setTimeout 함수가 일정 시간 뒤에 함수나 지정된 코드를 실행한다면 그 단짝인 clearTimeout 은 그 실행을 취소하는 역할을 합니다. 어떻게 사용하는지 알아볼까요? 매우 간단합니다!
clearTimeout(timeoutID);
요렇게 사용하면 앞서 실행된 setTimeout 함수는 실행을 취소합니다. 그렇다면 clearTimeout의 전달인자에 들어 있는 timeoutID는 무엇을 의미할까요? 이것이 바로 앞에서 setTimeout 을 실행했을 때 반환되었던 수상한 숫자의 정체입니다! setTimeout 함수는 실행되었을 때 항상 특정한 숫자형 값을 반환합니다. 그것이 바로 setTimeout 함수의 ID 값입니다. 이 ID 값을 clearTimeout 함수에 전달하게 되면 해당 ID가 가르키는 setTimeout의 실행이 종료되는 것이지요. 다음과 같은 코드로 살펴보실 수 있습니다.
const funcTime=() => {console.log('go!')}
let timeId = setTimeout(funcTime , 3000); /*setTimeout 함수의 ID를 timeId 변수에 저장합니다.*/
clearTimeout(timeId);
위와 같은 코드를 실행하면 clearTimeout으로 인해 'go!' 문자열은 절대 콘솔 창에 찍히지 않을 겁니다.