AngularJS의 SetInterval

Rana Hasnain Khan 2024년2월15일
AngularJS의 SetInterval

이 기사에서는 예제와 함께 AngularJS의 setInterval()을 소개합니다.

AngularJS의 setInterval()

Angular에서 생산적인 대규모 응용 프로그램을 작업하는 동안 특정 작업에 대한 간격을 설정해야 합니다. 이러한 작업은 일정 간격 후에 자동으로 일부 중요한 데이터를 처리합니다.

예를 들어 전체 데이터베이스를 백업하려는 경우 간격 시간을 24시간으로 설정하여 24시간마다 백업되도록 할 수 있습니다.

애플리케이션에 최신 활동, 게시물 또는 알림을 표시하려면 AngularJS 애플리케이션에서 setInterval() 메서드를 사용할 수 있습니다. 이 메서드는 두 개의 매개변수를 사용합니다.

첫 번째 매개변수는 각 간격 후에 실행될 함수입니다. 두 번째 매개변수는 밀리초 단위의 시간입니다.

setInterval() 메소드는 간격을 밀리초 단위로 지정하는 함수입니다. setInterval() 메소드는 애플리케이션이 실행 중일 때 계속 실행됩니다.

setInterval() 메서드를 중지하는 방법은 두 가지뿐입니다. 애플리케이션을 닫거나 clearInterval() 메소드를 사용하여 setInterval() 메소드를 종료할 수 있습니다.

setInterval() 메서드의 구문은 다음과 같습니다.

newInterval = setInterval(function(), milliseconds);

실행을 중지하려면 clearinterval() 메서드를 사용해야 합니다. 이 메서드의 구문은 아래에 나와 있습니다.

clearInterval(newInterval);

현재 시간을 가져오고 setInterval() 메서드를 사용하여 매초 업데이트하는 예제를 살펴보겠습니다. 이 예제의 코드는 아래와 같습니다.

<!DOCTYPE html>
<html>
<body>

<p id="timer"></p>

<script>
setInterval(newTimer, 1000);

function newTimer() {
  const newDate = new Date();
  document.getElementById("timer").innerHTML = newDate.toLocaleTimeString();
}
</script>

</body>
</html>

출력:

angularjs의 setinterval은 시간 예제를 가져옵니다

위의 예는 시간이 1초마다 업데이트됨을 보여줍니다. 이제 원할 때마다 시간을 중지하는 옵션을 추가하려면 clearInterval() 메서드를 사용할 수 있습니다.

같은 예제를 통해 아래와 같이 clearInterval() 메서드를 사용하여 시간을 중지하는 버튼이나 setInterval() 메서드를 추가해 보겠습니다.

<!DOCTYPE html>
<html>
<body>

<p id="timer"></p>

<button onclick="newStopFunc()">Stop Time By Clicking This Button</button>

<script>
const newInterval = setInterval(newTimer, 1000);

function newTimer() {
  const newDate = new Date();
  document.getElementById("timer").innerHTML = newDate.toLocaleTimeString();
}

function newStopFunc() {
  clearInterval(newInterval);
}
</script>

</body>
</html>

출력:

angularjs 중지 시간 예제의 setinterval

Rana Hasnain Khan avatar Rana Hasnain Khan avatar

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

LinkedIn