자바스크립트 setinterval 사용법-프런트엔드 Q&A-php.cn

자바스크립트 setinterval 사용법

WBOY

풀어 주다： 2023-05-15 20:16:05

원래의

1398명이 탐색했습니다.

JavaScript는 가장 일반적으로 사용되는 프런트 엔드 프로그래밍 언어 중 하나입니다. 강력한 기능과 유연한 기능 중 하나는 setInterval()입니다. setInterval()은 코드 실행 간격을 만드는 데 사용되는 JavaScript 메서드입니다. 지정된 간격으로 반복적으로 코드를 호출할 수 있습니다. 이 기사에서는 setInterval()의 사용법을 자세히 소개하고 몇 가지 실제 예제를 제공합니다.

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

setInterval(function, milliseconds);

이 중 첫 번째 매개변수는 실행될 코드 블록이고, 두 번째 매개변수는 실행 간격입니다. 코드(밀리초).

다음은 간단한 예입니다.

setInterval(function(){
  console.log("Hello World!");
}, 1000);

로그인 후 복사

이 코드는 1초마다 "Hello World!"를 출력합니다. setInterval() 메소드에는 코드 블록을 실행하기 위한 매개변수로 함수가 필요합니다. 매개변수를 전달해야 하는 경우 익명 함수를 사용하여 이를 달성할 수 있습니다. 예:

var name = "Mike";

setInterval(function(){
  console.log("Hello " + name + "!");
}, 1000);

로그인 후 복사

이 예는 1초마다 "Hello Mike!"를 출력합니다. 이 예에서는 변수를 사용하여 코드 블록에서 사용할 name 매개변수를 전달했습니다.

setInterval() 메서드는 타이머를 지우는 데 사용할 수 있는 식별자를 반환합니다. 예는 다음과 같습니다.

var timer = setInterval(function(){
  console.log("Hello World!");
}, 1000);

// 清除定时器
clearInterval(timer);

로그인 후 복사

이 예에서는 먼저 setInterval() 메서드의 반환 값을 타이머 변수에 저장한 다음 ClearInterval() 메서드를 사용하여 타이머를 지웁니다. 그러면 코드 블록의 실행이 중지되고 관련 메모리가 지워집니다.

setInterval() 메서드를 중첩하여 여러 시간 간격으로 코드 블록을 실행할 수도 있습니다. 예:

setInterval(function(){
  console.log("First block of code");
  setTimeout(function(){
    console.log("Second block of code");
  }, 500);
}, 1000);

로그인 후 복사

이 예에서는 두 개의 코드 블록을 정의했습니다. 첫 번째 코드 블록은 1초마다 "첫 번째 코드 블록"을 출력합니다. 첫 번째 코드 블록의 끝에서 setTimeout() 메서드를 사용하여 0.5초마다 "두 번째 코드 블록"을 출력하는 두 번째 코드 블록을 정의합니다. 두 코드 블록은 서로 다른 시간 간격을 갖습니다.

마지막으로 setInterval() 메서드를 사용한 실제 예제를 살펴보겠습니다. 온라인 스톱워치를 만들고 있다고 가정해 보겠습니다. 초를 기록하고 화면에 숫자를 표시하려면 타이머가 필요합니다. 앱 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
    <title>Online Timer</title>
</head>
<body>
    <h1>Online Timer</h1>
    <p id="output">0</p>
    <button onclick="startTimer()">Start</button>
    <button onclick="stopTimer()">Stop</button>
    <button onclick="resetTimer()">Reset</button>

    <script>
        var timer = null;
        var count = 0;

        function startTimer(){
            timer = setInterval(function(){
                count++;
                document.getElementById("output").innerHTML = count;
            }, 1000);
        }

        function stopTimer(){
            clearInterval(timer);
        }

        function resetTimer(){
            count = 0;
            document.getElementById("output").innerHTML = count;
            clearInterval(timer);
        }
    </script>
</body>
</html>

로그인 후 복사

코드에는 시작, 중지, 재설정이라는 세 개의 버튼이 포함되어 있습니다. 시작 버튼을 클릭하면 startTimer() 함수가 호출되어 1초마다 실행되는 setInterval() 함수가 생성됩니다. 이 기능은 경과 시간을 기록하고 화면에 표시합니다. 중지 버튼을 클릭하면 stopTimer() 함수가 호출되어 setInterval() 함수 호출을 지우고 타이머가 중지됩니다. 재설정 버튼을 클릭하면 ResetTimer() 함수가 호출되어 카운터를 0으로 재설정한 다음 타이머를 중지합니다.

결론적으로 setInterval()은 JavaScript에서 매우 유용한 메서드로, 지정된 간격으로 코드 블록을 쉽게 실행할 수 있습니다. 이를 사용하면 JavaScript 프로그래밍 효율성이 크게 향상될 수 있습니다.

위 내용은 자바스크립트 setinterval 사용법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!