>웹 프론트엔드 >JS 튜토리얼 >JavaScript를 사용하여 런타임 시 setinterval() 메서드의 간격을 어떻게 변경할 수 있습니까?

JavaScript를 사용하여 런타임 시 setinterval() 메서드의 간격을 어떻게 변경할 수 있습니까?

PHPz
PHPz앞으로
2023-09-07 23:45:101006검색

如何使用 JavaScript 在运行时更改 setinterval() 方法的时间间隔?

setInterval() 메소드는 괄호 안의 매개변수로 지정된 특정 시간 간격 후에 특정 코드 블록을 반복해서 호출하는 데 사용됩니다. setInterval() 메소드는 두 개의 매개변수를 받습니다. 첫 번째 매개변수는 반복적으로 실행해야 하는 코드이고, 두 번째 매개변수는 코드를 다시 실행해야 하는 시간입니다.

이 글에서는 런타임 시 setInterval() 메소드의 시간 간격을 변경하는 방법을 알아봅니다. 이렇게 하면 주어진 코드가 불규칙하거나 가변적인 간격으로 실행됩니다.

JavaScript는 아래와 같이 setInterval() 메서드의 시간 간격을 변경하는 두 가지 내장 메서드를 제공합니다. -

  • clearInterval() 메소드를 사용하세요.

  • setTimeout() 메소드를 사용하세요.

이 두 가지 방법의 작동 원리와 구현에 대해 각각 자세히 알아 보겠습니다.

clearInterval() 메소드를 사용하세요

clearInterval() 메소드는 이전에 실행된 setInterval() 함수를 지우거나 중지하는 데 사용됩니다. 이 메소드를 사용하면 setInterval()에 전달된 함수 내에서 이 함수를 호출하여 seInterval() 메소드의 시간 간격을 변경할 수 있으며 이전에 호출된 setInterval() 메소드를 지우고 코드에서 정의할 새 메소드를 사용합니다. 시간 가치.

문법

다음 구문은 이전 setInterval() 메서드를 지우기 위해clearInterval() 메서드를 사용하는 방법을 보여줍니다. -

으아악

실제로 이 메소드를 이해하고 JavaScript의clearInterval() 메소드를 사용하여 setInterval() 메소드의 타이밍을 변경해 보겠습니다.

알고리즘

  • 1단계 - 첫 번째 단계에서는 HTML 문서에 두 개의 서로 다른 버튼을 추가합니다. 하나는 간격을 시작하는 버튼이고 다른 하나는 간격을 중지하는 버튼입니다.

  • 2단계 - 이 단계에서는 JavaScript의 ID를 사용하여 HTML 문서에서 필요한 모든 요소를 ​​가져와 변경을 수행합니다.

  • 3단계 - 다음 단계에서는 먼저clearInterval() 메서드를 사용하여 이전 setInterval()을 지운 다음 새로운 값을 사용하고 이 단계에서 정의한 함수를 다시 사용하는 JavaScript 함수를 정의합니다. () 방법.

  • 4단계 - 마지막 단계에서는 clearInterval() 메서드를 사용하여 setInterval() 실행을 중지하는 또 다른 JavaScript 함수를 정의합니다.

아래 예제는 코드를 자세히 살펴보면 위 알고리즘을 실제로 이해하는 데 도움이 될 것입니다 -

으아악

위의 예에서는 JavaScript를 사용하여 런타임 시 setInterval() 메서드의 시간 간격을 변경하기 위해 ClearInterval() 메서드를 사용하고 있습니다.

setTimeout() 메소드를 사용하세요

setTimeout() 메서드는 setInterval() 메서드와 유사합니다. 또한 특정 간격 후에 코드 조각을 호출하지만 setInterval()과 달리 코드를 반복해서 실행하는 대신 한 번만 실행합니다. setTimeout() 메서드는 코드를 한 번 실행한 후 자동으로 중지되므로 이전 시간 간격의 실행을 중지하기 위해 setInterval() 메서드와 같이clearInterval() 메서드를 호출할 필요가 없습니다.

문법

다음 구문에 따라 setTimeout() 메서드를 사용하여 시간 간격을 변경합니다. -

으아악

이제 JavaScript 코드 예제를 통해 이 메서드의 실제 구현을 살펴보겠습니다.

알고리즘

이 방법의 알고리즘은 이전 방법과 거의 동일합니다. 아래와 같이 약간의 변경만 수행하면 됩니다 -

  • 이전 알고리즘의 start() 함수에서clearInterval() 메서드를 제거하세요.

  • 간격 변수의 값을 설정하려면 동일한 매개변수를 사용하는 setInterval() 메서드 대신 setTimeout() 메서드를 사용하세요.

아래 예는 setTimeout 메소드의 실제 사용을 설명하고 수행해야 하는 이전 알고리즘의 위 변경 사항을 이해하는 데 도움이 됩니다. -

으아악

이 예에서는 JavaScript의 setTimeout() 메서드를 사용하여 JavaScript를 사용하는 런타임 시 각 호출 사이의 시간 간격을 변경합니다.

이 기사에서는 setInterval() 메서드를 사용하여 시간 간격을 변경하는 두 가지 방법을 배웠습니다. 각 접근 방식에 대한 별도의 코드 예제를 사용하여 필요한 이론과 실제 구현을 통해 두 접근 방식을 자세히 논의합니다.

위 내용은 JavaScript를 사용하여 런타임 시 setinterval() 메서드의 간격을 어떻게 변경할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 tutorialspoint.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제