목차

JavaScript Timing Events

  • description : JavaScript Timing Events
  • author : 오션
  • email : shlim@repia.com
  • lastupdate : 2021-04-12


Source of the article


JavaScript는 시간 간격을 두고 실행될 수 있습니다.

이를 타이밍 이벤트(Timing Events)라고 합니다.

Timing Events

window 오브젝트를 사용하면 지정된 시간 간격으로 코드를 실행할 수 있습니다.

이러한 시간 간격을 타이밍 이벤트라고 합니다.

JavaScript와 함께 사용하는 두 가지 주요 메서드는 다음과 같습니다.


setTimeout()setInterval()은 모두 HTML DOM Window 오브젝트의 메서드입니다.

The setTimeout() Method

window.setTimeout(function, milliseconds);

window.setTimeout() 메서드는 window prefix없이 작성할 수 있습니다.

첫 번째 매개 변수는 실행할 함수입니다.

두 번째 매개 변수는 실행 전 밀리 초 수를 나타냅니다.

예제

버튼을 클릭하십시오. 3 초 동안 기다리면 페이지에 “Hello”라는 window 경고가 표시됩니다.

Click "Try it". Wati 3 seconds, and the page will alert "Hello".

How to Stop the Execution?

clearTimeout() 메서드는 setTimeout()에 지정된 함수의 실행을 중지합니다.

window.clearTimeout(timeoutVariable)


window.clearTimeout() 메서드는 window prefix 없이 작성할 수 있습니다.

clearTimeout() 메서드는 setTimeout()에서 반환된 변수를 사용합니다.

myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);


함수가 아직 실행되지 않은 경우, clearTimeout() 메서드를 호출하여 실행을 중지 할 수 있습니다.

예제

위와 같은 예제이지만, “Stop” 버튼이 추가되었습니다.

<!DOCTYPE html>
<html>
<body>
    <p>Click "Try it". Wati 3 seconds, and the page will alert "Hello".</p>
    <p>Click "Stop" to prevent the first function to execute.</p>
    <p>(You must click "Stop" before the 3 seconds are up.)</p>
    <button onclick="myVar = setTimeout(myFunction, 3000)">Try it</button>
    <button onclick="clearTimeout(myVar)">Stop it</button>
    <script>
        function myFunction() {
            alert("Hello");
        }
    </script>
</body>
</html>

The setInterval() Method

setInterval() 메서드는 주어진 시간 간격마다 주어진 함수를 반복합니다.

window.setInterval(function, milliseconds);


window.setInterval() 메서드는 window prefix 없이 작성할 수 있습니다.

첫 번째 매개 변수는 실행할 함수입니다.

두 번째 매개 변수는 각 실행 사이의 시간 간격 길이를 나타냅니다.

이 예제는 디지털 시계처럼 1 초에 한 번씩 “myTimer”라는 함수를 실행합니다.

예제

현재 시간을 표시합니다.

<!DOCTYPE html>
<html>
<body>
    <p>A script on this page starts this clock:</p>
    <p id="demo"></p>
    <script>
        var myVar = setInterval(myTimer, 1000);
        function myTimer() {
            var d = new Date();
            document.getElementById("demo").innerHTML = d.toLocaleTimeString();
        }
    </script>
</body>
</html>


1 초에는 1000 밀리 초가 있습니다.

How to Stop the Execution?

clearInterval() 메서드는 setInterval() 메서드에서 지정된 함수의 실행을 중지합니다.

window.clearInterval(timerVariable)


window.clearInterval() 메서드는 window prefix없이 작성할 수 있습니다.

clearInterval() 메서드는 setInterval()에서 반환된 변수를 사용합니다.

myVar = setInterval(function, milliseconds);
clearInterval(myVar);

예제

위와 같은 예제이지만, “Stop time”버튼을 추가했습니다.

<!DOCTYPE html>
<html>
<body>
  <p>A script on this page starts this clock:</p>
  <p id="demo"></p>
  <button onclick="clearInterval(myVar)">Stop time</button>
  <script>
    var myVar = setInterval(myTimer, 1000);
    function myTimer() {
      var d = new Date();
      document.getElementById('demo').innerHTML = d.toLocaleTimeString();
    }
  </script>
</body>
</html>

More Examples

Another simple timing

<!DOCTYPE html>
<html>
<body>
    <button onclick="timedText()">Try it</button>
    <p id="demo">Click on "Try it". I will display when two, four, and six seconds have passed.</p>
    <script>
        function timedText() {
            setTimeout(myTimeout1, 2000)
            setTimeout(myTimeout2, 4000)
            setTimeout(myTimeout3, 6000)
        }
        function myTimeout1() {
            document.getElementById('demo').innerHTML = "2 seconds";
        }
        function myTimeout2() {
            document.getElementById('demo').innerHTML = "4 seconds";
        }
        function myTimeout3() {
            document.getElementById('demo').innerHTML = "6 seconds";
        }
    </script>
</body>
</html>

A clock created with a timing event

<!DOCTYPE html>
<html>
<head>
    <script>
        function startTime() {
            var today = new Date();
            var h = today.getHours();
            var m = today.getMinutes();
            var s = today.getSeconds();
            m = checkTime(m);
            s = checkTime(s);
            document.getElementById('txt').innerHTML = h + ":" + m + ":" + s;
            var t = setTimeout(startTime, 500);
        }
        function checkTime(i) {
            if (i < 10) { i = "0" + i };  // add zero in front of numbers < 10
            return i;
        }
    </script>
</head>
<body onload="startTime()">
    <div id="txt"></div>
</body>
</html>