setInterval이 있는 JavaScript 반복 타이머

이제 함수를 지연시키는 how JavaScript setTimeout works에 대해 잘 이해했습니다.

x 시간마다 작업을 수행하는 방법을 살펴보겠습니다.

이것은 물건에 애니메이션을 적용하거나 데이터 피드를 확인하는 데 매우 유용할 수 있습니다.

자바스크립트 setInterval 함수

이것이 가장 기본적인 형태로 어떻게 작동하는지 봅시다.

setInterval(() => {
  // Run every 100 milliseconds
}, 100);

이 함수는 100밀리초마다 실행됩니다.

종종 특정 조건이 충족될 때까지만 실행되도록 이 작업을 수행할 수 있습니다.
clearInterval 를 사용하여 간격을 지울 수 있습니다.

const timer = setInterval(() => {
  // Do something
}, 100);

clearInterval(timer);

또는 간격 내에서 중지할 수도 있습니다.

const timer = setInterval(() => {
  if (condition) {
    clearInterval(timer);
    return;
  }

  // Execute the function
}, 100);

이것은 특정 작업이 실행되지 않도록 하는 좋은 방법입니다.

주의점

setInterval을 사용할 때 함수가 실행되는 시간은 중요하지 않습니다.

설정된 시간에 항상 새 루프를 시작한다는 의미입니다.

예를 들어, 애니메이션을 사용하는 데 사용하지만 애니메이션의 길이가 다른 경우 다음 애니메이션이 시작되고 첫 번째 애니메이션이 방금 종료되는 이상한 부작용이 발생할 수 있습니다.



보시다시피, 각 기능은 실행 시간을 가질 수 있습니다.

특정 시간을 기다려야 하는 경우 setTimeout를 사용하는 것이 더 나은 솔루션일 수 있습니다.

재귀적인 setTimeout 함수를 설정할 수 있습니다.
그것은 일을 마치면 스스로를 호출하는 함수입니다.

const coolFunc = () => {
  // Execute the function

  setTimeout(coolFunc, 100);
};

setTimeout(coolFunc, 100);

결과적으로 다음과 같은 흐름이 발생합니다.



실제 사례를 더 보고 싶으시다면 이를 사용하는 기사 목록이 있습니다.

Fading images with JavaScript

Creating a song in JavaScript

Countdown clock

읽어주셔서 감사합니다. 연결해 보겠습니다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook 또는