JavaScript의 타이머

Shraddha Paghdar 2023년10월12일
  1. JavaScript에서 setTimeout()을 사용하여 타이머 만들기
  2. JavaScript에서 setInterval()을 사용하여 타이머 만들기
JavaScript의 타이머

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에서 제공합니다. 이 방법은 workerwindow 인터페이스에서 제공됩니다. 반복적으로 함수를 호출하거나 코드 섹션을 실행합니다. 이 코드는 각 호출 사이에 고정된 시간 지연으로 실행됩니다.

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
Shraddha Paghdar avatar Shraddha Paghdar avatar

Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.

LinkedIn

관련 문장 - JavaScript Timer