JavaScript에서 타이머가 작동하는 방식을 설명하세요.

JavaScript에서 타이머는 매우 주목할만한 기능입니다. 일반 시계 타이머와 마찬가지로 특정 시간에 타이머를 시작하고 특정 시간 이후에 JavaScript의 함수나 코드를 실행할 수 있습니다.

간단히 말하면 타이머를 사용하여 지연 후에 코드를 실행할 수 있습니다. 예를 들어, 웹사이트를 방문하면 3~4분 후에 등록 상자가 표시됩니다. 이를 위해 JavaScript를 사용할 수 있습니다. 등록 팝업을 표시하도록 지연 타이머를 설정할 수 있습니다.

실생활에서 타이머의 또 다른 좋은 예는 인앱 광고입니다. 어떤 앱이든 열면 2~3분 후에 광고가 표시되기 시작하고 1~2분 간격으로 광고가 변경됩니다.

자바스크립트에는 타이머를 설정하는 두 가지 다른 함수가 있는데, 이 튜토리얼에서는 이를 살펴보겠습니다.

특정 시간 이후에 코드를 실행하려면 setTimeOut() 함수를 사용하세요

setTimeOut() 함수를 사용하면 특정 지연 후에 코드를 실행할 수 있습니다. 그러나 이를 통해 지연을 정의할 수 있습니다. 특정 지연 후에 코드를 한 번만 실행합니다.

setTimeOut() 함수가 실행되면 타이머가 시작되고 특정 지연 후에 콜백 함수가 실행됩니다.

문법

사용자는 다음 구문에 따라 setTimeOut() 함수를 사용할 수 있습니다.

으아악

위 구문에서 콜백 함수는 화살표 함수로도 실행될 수 있습니다.

매개변수

• Callback – 지연 시간 후에 실행되는 함수입니다.

• Delay – 지연은 콜백 함수가 실행된 후의 시간(밀리초)입니다.

반환 값

setTimeOut() 함수는 타이머를 종료하는 데 사용할 수 있는 고유 ID를 반환합니다.

예

아래 예에서는 사용자가 "타이머 시작" 버튼을 클릭하면 callTimer() 함수가 호출됩니다. 사용자는 "callTimer 함수가 먼저 실행되었습니다"라고 인쇄하는 것을 볼 수 있으며, 2000밀리초 후에는 setTimeOut() 함수가 2000밀리초 후에 콜백 함수를 호출하므로 "이 함수는 지연 후에 실행됩니다"라고 인쇄됩니다.

으아악

setInterval() 함수를 사용하여 각 시간 간격 후에 함수를 실행하세요

setTimeOut() 함수는 콜백 함수를 한 번만 실행하지만 setInterval() 함수는 setInterval()에 두 번째 인수로 전달한 각 시간 간격 후에 코드를 실행합니다.

문법

사용자는 다음 구문에 따라 setInterval() 함수를 사용할 수 있습니다.

으아악

매개변수

• Callback – 매 시간 간격 후에 setInterval() 함수가 호출하는 함수입니다.

• Interval – 각 간격 후에 콜백 함수가 호출되는 시간(밀리초)입니다.

반환 값

setInterval() 함수는 타이머를 중지하는 데 사용할 수 있는 setTimeout() 함수와 같은 고유 ID도 반환합니다.

예

이 예에서는 setInterval() 함수를 사용하여 1000밀리초마다 콜백 함수를 호출합니다. 사용자는 타이머 시작 버튼을 누르면 startInterval() 함수가 실행되고 setInterval() 함수가 호출되는 것을 관찰할 수 있습니다. setInterval() 함수는 1초에 한 번씩 콜백 함수를 호출합니다.

으아악

clearTimeOut() 및clearInterval() 함수를 사용하여 타이머를 종료하세요

타이머를 시작한 후에는 타이머도 중지해야 합니다. setTimeOut() 함수를 중지하려면 ClearTimeOut() 함수를 사용하고 setInterval() 함수를 중지하려면 ClearInterval() 함수를 사용할 수 있습니다.

문법

으아악

매개변수

• TimerId - setTimeOut() 또는 setInterval() 함수에서 반환된 고유 ID입니다.

예

아래 예에서는 setInterval() 타이머 함수를 사용하여 매초 함수를 호출하고 있습니다. 또한 setInterval() 함수가 콜백 함수를 호출하는 횟수를 추적합니다.

콜백 함수에서는 if 문을 사용하여 개수가 3보다 큰지 확인하고, ClearInterval() 함수를 사용하여 타이머를 종료합니다.

으아악

위 출력에서 ​​사용자는 카운트가 3보다 클 때 타이머를 종료하기 때문에 카운트 = 3까지 인쇄되는 것을 볼 수 있습니다.

위 내용은 JavaScript에서 타이머가 작동하는 방식을 설명하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!