문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
======JavaScript Timing Events======
<WRAP left notice 80%>
  * description : JavaScript Timing Events
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-04-12
</WRAP>
<WRAP clear></WRAP>
\\
====Source of the article=== 
  * [[https://www.w3schools.com/js/js_timing.asp|JavaScript Timing Events]]
\\
%%JavaScript%%는 시간 간격을 두고 실행될 수 있습니다.\\
\\
이를 __타이밍 이벤트__(Timing Events)라고 합니다.\\

=====Timing Events=====
''window'' 오브젝트를 사용하면 지정된 시간 간격으로 코드를 실행할 수 있습니다.\\
\\
이러한 시간 간격을 타이밍 이벤트라고 합니다.\\
\\
%%JavaScript%%와 함께 사용하는 두 가지 주요 메서드는 다음과 같습니다.\\

  * ''setTimeout(function, milliseconds'')
    * 지정된 시간 (밀리 초)을 기다린 후 함수를 실행합니다.
  * ''setInterval(function, milliseconds'')
    * ''setTimeout()''과 동일하지만 함수 실행을 계속 반복합니다.
\\
''setTimeout()'' 및 ''setInterval()''은 모두 %%HTML DOM Window%% 오브젝트의 메서드입니다.\\

=====The setTimeout() Method=====
<code javascript>
window.setTimeout(function, milliseconds);
</code>
''%%window.setTimeout()%%'' 메서드는 window prefix없이 작성할 수 있습니다.\\
\\
첫 번째 매개 변수는 실행할 함수입니다.\\
\\
두 번째 매개 변수는 실행 전 밀리 초 수를 나타냅니다.\\
====예제====
버튼을 클릭하십시오. 3 초 동안 기다리면 페이지에 "Hello"라는 window 경고가 표시됩니다.\\
<HTML>
<!DOCTYPE html>
<html>
<body>
    <p>Click "Try it". Wati 3 seconds, and the page will alert "Hello".</p>
    <button onclick="setTimeout(myFunction, 3000)">Try it</button>
    <script>
        function myFunction() {
            alert('Hello');
        }
    </script>
</body>
</html>
</HTML>

=====How to Stop the Execution?=====
''%%clearTimeout()%%'' 메서드는 %%setTimeout()%%에 지정된 함수의 실행을 중지합니다.\\
\\
<code javascript>
window.clearTimeout(timeoutVariable)
</code>
\\
''%%window.clearTimeout()%%'' 메서드는 window prefix 없이 작성할 수 있습니다.\\
\\
''%%clearTimeout()%%'' 메서드는 ''%%setTimeout()%%''에서 반환된 변수를 사용합니다.\\
\\
<code javascript>
myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);
</code>
\\
함수가 아직 실행되지 않은 경우, ''%%clearTimeout()%%'' 메서드를 호출하여 실행을 중지 할 수 있습니다.\\

====예제====
위와 같은 예제이지만, "Stop" 버튼이 추가되었습니다.\\
<code javascript>
<!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>
</code>

=====The setInterval() Method=====
''%%setInterval()%%'' 메서드는 주어진 시간 간격마다 주어진 함수를 반복합니다.\\
\\
<code javascript>
window.setInterval(function, milliseconds);
</code>
\\

''%%window.setInterval()%%'' 메서드는 window prefix 없이 작성할 수 있습니다.\\
\\
첫 번째 매개 변수는 실행할 함수입니다.\\
\\
두 번째 매개 변수는 각 실행 사이의 시간 간격 길이를 나타냅니다.\\
\\
이 예제는 디지털 시계처럼 1 초에 한 번씩 "myTimer"라는 함수를 실행합니다.\\

====예제====
현재 시간을 표시합니다.
<code javascript>
<!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>
</code>
\\
1 초에는 1000 밀리 초가 있습니다.\\

=====How to Stop the Execution?=====
''%%clearInterval()%%'' 메서드는 %%setInterval()%% 메서드에서 지정된 함수의 실행을 중지합니다.\\
\\
<code javascript>
window.clearInterval(timerVariable)
</code>
\\
''%%window.clearInterval()%%'' 메서드는 window prefix없이 작성할 수 있습니다.\\
\\
''%%clearInterval()%%'' 메서드는 ''%%setInterval()%%''에서 반환된 변수를 사용합니다.\\
<code javascript>
myVar = setInterval(function, milliseconds);
clearInterval(myVar);
</code>

====예제====
위와 같은 예제이지만, "Stop time"버튼을 추가했습니다.\\
<code javascript>
<!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>
</code>

=====More Examples=====
====Another simple timing====
<code javascript>
<!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>
</code>

=====A clock created with a timing event=====
<code javascript>
<!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>
</code>




{{tag>오션, Javascript Timing Events}}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
