JavaScript의 타이머

1. JavaScript에서 setTimeout()을 사용하여 타이머 만들기
2. JavaScript에서 setInterval()을 사용하여 타이머 만들기

JavaScript는 비차단 코드를 실행하기 위한 두 가지 타이머 기능을 제공합니다. JavaScript는 setTimeout() 및 setInterval() 함수를 제공하며, 특정 시간 간격 후에 지정된 표현식 또는 함수를 실행합니다.

오늘 포스팅에서는 자바스크립트 타이머에 대해 알아보겠습니다.

JavaScript에서 setTimeout()을 사용하여 타이머 만들기

타이머가 만료된 후 특정 기능 또는 코드 섹션을 실행하는 JavaScript에서 제공하는 비동기 기능입니다. 중첩된 시간 초과, 비활성 탭의 시간 초과, 추적 스크립트 제한, 페이지 로드 중 시간 초과 지연과 같은 다양한 이유로 시간 초과가 지연됩니다.

JavaScript의 setTimeout() 구문

setTimeout(function [, delay, arg1, arg2, ...]);
setTimeout(code[, delay]);

매개변수

• function: 필수 매개변수입니다. 시간이 경과한 후 실행되어야 하는 기능을 지정합니다.
• code: 필수 매개변수입니다. 사용자가 함수를 전달하지 않는 경우 사용자는 함수에 대한 대안인 문자열을 전달할 수 있습니다.
• delay: 선택적 매개변수입니다. 이 매개변수는 지정된 코드 또는 기능을 실행하기 전에 밀리초 단위의 타이머로 숫자 값을 허용합니다. 값이 전달되지 않으면 기본값은 0이며 실행이 즉시 발생합니다.
• arg1, ..., argN: 선택적 매개변수입니다. 함수가 전달되면 함수의 값을 추가 인수로 전달할 수 있습니다.

반환 값

이 setTimeout() 메서드는 타이머를 식별하는 데 도움이 되는 양수 timeoutID를 반환합니다. 이 값은 clearTimeout()에 사용할 수 있습니다.

예제 코드:

<button onclick="setTimeoutFunction()">Try set Timeout</button>

function addFn(a, b) {
  console.log(a + b);
  return a + b;
}

function setTimeoutFunction() {
  setTimeout(addFn, 5000, 5, 10);
}

출력:

15

JavaScript에서 setInterval()을 사용하여 타이머 만들기

setInterval() 메소드는 JavaScript에서 제공합니다. 이 방법은 worker 및 window 인터페이스에서 제공됩니다. 반복적으로 함수를 호출하거나 코드 섹션을 실행합니다. 이 코드는 각 호출 사이에 고정된 시간 지연으로 실행됩니다.

setInterval()과 setTimeout() 함수의 유일한 차이점은 setInterval()은 각 호출 사이에 지연을 두고 함수를 반복적으로 호출하는 반면 setTimeout()은 지연 후에 함수를 실행한다는 것입니다.

JavaScript의 setTimeout() 구문

setInterval(function [, delay, arg1, arg2, ...]);

매개변수

• function: 필수 매개변수입니다. 시간이 경과한 후 실행되어야 하는 기능을 지정합니다.
• code: 필수 매개변수입니다. 사용자가 함수를 전달하지 않으면 사용자는 함수에 대한 대체 문자열을 전달할 수 있습니다.
• delay: 선택적 매개변수입니다. 이 매개변수는 지정된 코드 또는 기능을 실행하기 전에 밀리초 단위로 타이머 역할을 하는 숫자 값을 허용합니다. 값이 전달되지 않으면 0이 기본값이며 즉시 실행됩니다.
• arg1, ..., argN: 선택적 매개변수입니다. 함수가 전달되면 함수의 값을 추가 인수로 전달할 수 있습니다.

반환 값

이 setInterval() 메서드는 타이머를 식별하는 데 도움이 되는 양수 intervalID를 반환합니다. 이 값은 clearInterval()에 사용할 수 있습니다.

예제 코드:

<button onclick="setIntervalFunction()">Try set Interval</button>

function addFn(a, b) {
  console.log(a + b);
  return a + b;
}

function setIntervalFunction() {
  setInterval(addFn, 5000, 5, 10);
}

출력:

15