JavaScript의 setInterval 루프

대부분의 작업을 수행하기 위해 JavaScript에서 항상 사용할 수 있는 기성 방법이 있습니다. 한 데이터 유형을 다른 데이터 유형으로 변환, 간격 루프 설정, 개체 또는 배열 업데이트, 키보드 입력 이벤트 인식 등.

이에 따라 JavaScript에서 타이머를 사용하는 데 도움이 되는 몇 가지 유용한 방법이 있습니다. 그리고 이 기사에서는 JavaScript에서 간격 루프를 사용하는 방법을 안내합니다.

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

setInterval()을 사용하여 JavaScript에서 루프 시간으로 간격 설정

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

setInterval과 setTimeout 함수의 유일한 차이점은 사전에는 각 호출 사이에 지연을 두고 함수를 반복적으로 호출하는 반면 나중에 지연 후에 함수를 실행한다는 것입니다. 지정된 지연 후에 함수가 한 번 호출되도록 하려면 setTimeout()을 사용하십시오.

통사론:

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

function은 시간이 경과한 후 수행할 기능을 지정하는 필수 매개변수입니다.

code는 필수 매개변수입니다. 사용자가 함수를 제출하지 않으면 사용자는 함수의 대안인 문자열을 전달할 수 있습니다. delay는 선택적 매개변수입니다.

이 매개변수는 지정된 코드 또는 기능이 실행되기 전에 밀리초 단위로 타이머 역할을 하는 숫자 값을 허용합니다. 값이 전달되지 않으면 0이 실행을 유발하는 기본값입니다.

arg1, ..., argN은 선택적 매개변수입니다. 함수가 전달될 때 함수의 값을 추가 인수로 전달할 수 있습니다.

자세한 내용은 setInterval() 메서드 문서를 참조하세요.

let counter = 0;
const i = setInterval(function() {
  console.log(counter);
  counter++;
  if (counter === 5) {
    clearInterval(i);
  }
}, 200);

위의 코드에서 카운터를 0으로 설정하고 원하는 값에 도달할 때까지 setInterval 함수 내에서 업데이트합니다. 원하는 값에 도달하는 즉시 간격을 삭제할 수 있습니다. 이 setInterval() 메서드는 타이머를 식별하는 데 도움이 되는 고유한 intervalID와 양수 값을 반환합니다. 이 값은 clearInterval()에 사용할 수 있습니다. 이 clearInterval() 메서드는 이전에 setInterval()로 설정한 반복 작업(시간 초과)을 취소합니다.

출력:

0
1
2
3
4