JavaScript에서 실행 지연

이제 코드 실행 전에 지연을 만들 수 있는 함수 setTimeout에 대해 알아보겠습니다. 이 지연은 함수 setInterval과 달리 단 한 번만 발생합니다.

setTimeout은 첫 번째 매개변수로 함수의 소스 코드를 받고, 두 번째 매개변수로는 그 함수를 실행하기 전의 지연 시간(밀리초)을 받습니다.

어떤 예시를 통해 함수의 동작을 살펴보겠습니다. 다음과 같은 버튼이 있다고 가정해 봅시다:

html<input type="submit" id="elem">

변수에 버튼에 대한 참조를 얻어옵니다:

javascriptlet elem = document.querySelector('#elem');

이제 버튼을 클릭했을 때 화면에 alert가 즉시가 아니라 클릭 후 3초 후에 표시되도록 해봅시다:

javascriptelem.addEventListener('click', function() {
  setTimeout(function() {
    alert('!');
  }, 3000);
});