[javascript] 자바스크립트 setTimeout 사용방법

참고: https://www.freecodecamp.org/news/javascript-settimeout-how-to-set-a-timer-in-javascript-or-sleep-for-n-seconds/

이 튜토리얼은 javascript 내장 메소드인 setTimeout()을 사용한 코드 예제를 보여주고 이 메소드가 작동하는 방식을 이해하는데 도움을 줄 것입니다.

javascript에서 setTimeout()을 사용하는 방법

setTimeout() 메소드의 기능은 일정 시간이 지난 후 정해진 코드를 실행하게 합니다. 특정 시간에 javascript 코드를 실행하도록 타이머를 설정하는 것이라고 생각할 수 있습니다. 예를 들어 아래 코드는 2초가 지난 후 javascript 콘솔에 "Hello World"를 출력합니다.

setTimeout(function () {
  console.log("Hello World");
}, 2000);

console.log("setTimeout() example...");

위의 코드는 먼저 "setTimeout() example..."을 콘솔에 출력한 다음 2초가 지나면 javascript가 "Hello World"를 출력합니다.

setTimeout의 문법은 다음과 같습니다.

setTimeout(function, milliseconds, parameter1, parameter2, ...);

이 메소드의 첫번째 매개변수는 setTimeout()으로 실행하고 싶은 javascript 함수입니다. 여기서 직접 함수를 작성해서 매개변수로 넘길 수도 있고, 아래 예제 처럼 다른 부분에 선언된 함수를 참조할 수도 있습니다.

function greeting() {
  console.log("Hello World");
}

setTimeout(greeting);

다음으로 밀리초(milliseconds)를 매개변수로 넘길 수 있습니다. 이 수치는 javascript가 코드를 실행하기 까지 기다릴 시간을 밀리초 단위로 지정한 것 입니다. 1초는 1000밀리초 이기 때문에 만약 3초를 기다리고 싶으면 3000을 입력해야 합니다.

function greeting() {
  console.log("Hello World");
}

setTimeout(greeting, 3000);

만일 두번째 매개변수를 생략한다면 setTimeout()은 전달받은 함수를 기다리지 않고 바로 실행합니다.

마지막으로 setTimeout에 매개변수를 추가적으로 입력할 수 있는데 다음 예제와 같이 이 값들을 전달받은 함수 안에서 쓸 수 있습니다.

728x90

function greeting(name, role) {
  console.log(`Hello, my name is ${name}`);
  console.log(`I'm a ${role}`);
}

setTimeout(greeting, 3000, "Nathan", "Software developer");

이제 "매개변수를 함수에 직접 전달하지 않는 이유는 뭐지?" 라는 생각이 들지도 모릅니다. 그렇게 하지 않는 이유는 다음과 같이 전달함수에 매개변수를 직접 입력하면

setTimeout(greeting("Nathan", "Software developer"), 3000);

이렇게 하면 javascript가 지정한 시간을 기다리지 않고 함수를 바로 실행해 버립니다. 왜냐하면 저 코드의 첫번째 매개변수에는 함수의 참조를 전달한게 아니라 함수 호출을 보낸 것이기 때문입니다. 이와 같이 함수의 참조를 전달해야하는 이유 때문에 함수에 매개변수를 전달하기 위해서는 setTimeout()에게 매개변수를 함수에 전달하도록 요청해야합니다.

반응형

setTimeout()을 취소하는 방법

다른 내장 메소드 clearTimeout()을 통해서 setTimeout()을 취소할 수 있습니다. clearTimeout()은 setTimeout()을 취소하기 위해 id를 필요로 합니다. 이 id는 setTimeout()의 리턴 값으로 반환됩니다. 다음은 clearTimeout()의 사용 예제입니다.

const timeoutId = setTimeout(function () {
  console.log("Hello World");
}, 2000);

clearTimeout(timeoutId);
console.log(`Timeout ID ${timeoutId} has been cleared`);

만일 여러개의 setTimeout()을 사용한다면 이들의 id들을 모두 저장해 뒀다가 clearTimeout()이 필요할 때 적절한 id를 사용하여 필요한 만큼 실행해야 합니다.

정리

javascript의 setTimeout()은 내장된 메소드로 특정 시간에 특정 함수를 실행하게 해줍니다. 기다리는 시간을 지정하기 위해 밀리초 단위의 시간을 매개변수로 전달해야하고 이는 1초의 대기를 원한다면 1000밀리초를 입력해야한다는 의미입니다. 또한 현재 실행중이 setTimeout()을 취소하기 위해서는 clearTimeout()을 사용해야합니다. 여기에 전달할 id는 setTimeout()을 실행할 때 반환된 값입니다.

관련 글

자바스크립트 debounce로 함수 지연 시키기

자바스크립트 scroll to top 버튼 만들기