자바스크립트 타이머에는 어떤 기능이 있나요?-프런트엔드 Q&A-php.cn

자바스크립트 타이머에는 어떤 기능이 있나요?

青灯夜游

풀어 주다： 2021-10-20 16:56:44

원래의

6611명이 탐색했습니다.

Javascript 타이머에는 다음과 같은 2가지 함수가 있습니다. 1. 지정된 시간(밀리초 단위) 후에 특정 코드를 실행하는 데 사용되는 setTimeout() 함수 2. setInterval() 함수, 다음과 같이 사용됩니다. 특정 코드를 지정된 주기(단위: 밀리초)에 따라 반복적으로 실행합니다.

자바스크립트 타이머에는 어떤 기능이 있나요?

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

JavaScript 타이머("타이머"라고도 함)는 지정된 시간이 지나면 특정 작업을 수행하는 데 사용됩니다. 이는 우리 삶의 알람 시계와 유사합니다.

JavaScript에서는 타이머를 사용하여 특정 코드의 실행을 지연시키거나 특정 코드를 고정된 간격으로 반복적으로 실행할 수 있습니다. 예를 들어, 타이머를 사용하여 페이지의 광고를 정기적으로 업데이트하거나 실시간 시계 등을 표시할 수 있습니다.

JavaScript는 타이머를 설정하는 두 가지 방법, 즉 setTimeout()과 setInterval()을 제공합니다. 두 방법의 차이점은 다음과 같습니다. 단위는 밀리초), 특정 코드는 한 번만 실행됩니다.

setInterval() 특정 기간(단위는 밀리초)에 따라 특정 코드를 반복적으로 실행합니다. () 함수를 호출하여 브라우저 창을 수동으로 중지하거나 닫습니다setTimeout()JS setTimeout() 함수는 지정된 시간 이후 특정 코드를 실행하는 데 사용되며 해당 코드는 한 번만 실행됩니다.

setTimeout(code,millisec)

로그인 후 복사



JS setTimeout() 함수의 구문 형식은 다음과 같습니다.	매개 변수 설명은 다음과 같습니다.

code 필수입니다. 호출할 함수 다음에 실행될 JavaScript 코드 문자열입니다.

밀리초가 필요합니다. 코드를 실행하기 전에 기다려야 하는 시간(밀리초)입니다.

샘플 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <script type="text/javascript">
        var myFun = function (str = &#39;JavaScript&#39;){
            document.write(str + "<br>");
        };
        setTimeout(myFun, 500, &#39;Hello&#39;);
        setTimeout(myFun, 1000);
        setTimeout(function(){
            document.write("定时器<br>");
        }, 1500)
        setTimeout("document.write(\"setTimeout()\")", 2000);
    </script>
</body>
</html>

로그인 후 복사

위 코드를 실행하면 다음 내용이 500밀리초 간격으로 출력됩니다.

Hello
JavaScript
定时器
setTimeout()

로그인 후 복사

setInterval()
JS setInterval() 함수는 반복적으로 실행될 수 있는 타이밍 서버는 각 실행마다 지정된 시간 간격 동안 기다려야 합니다.
JS setInterval() 함수의 구문 형식은 다음과 같습니다.

setInterval(code,millisec[,"lang"])

로그인 후 복사

매개 변수 설명은 다음과 같습니다.

code 필수입니다. 호출할 함수 또는 실행할 코드 문자열입니다.

밀리섹은 필수입니다. 주기적 실행 또는 코드 호출 사이의 시간 간격(밀리초)입니다. 팁: setInterval() 함수에 의해 정의된 타이머는 브라우저 창을 수동으로 중지하거나 닫기 위해 clearInterval() 함수를 호출하지 않는 한 자동으로 중지되지 않습니다.

샘플 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <p id="one"></p>
    <p id="two"></p>
    <script type="text/javascript">
        var num = 1;
        var myFun = function (){
            document.getElementById(&#39;one&#39;).innerHTML += num + " ";
            num ++;
        };
        setInterval(myFun, 500);
        setInterval(function(){
            var d = new Date();
            document.getElementById(&#39;two&#39;).innerHTML = d.toLocaleTimeString();
        }, 1000);
    </script>
</body>
</html>

로그인 후 복사

실행 결과는 다음과 같습니다.

JS 타이머 취소
setTimeout() 또는 setInterval()을 사용하여 타이머를 설정하면 두 메서드 모두 생성됩니다. 타이머 고유 ID, ID는 "타이머 식별자"라고도 알려진 양의 정수 값입니다. 이 ID를 통해 ID에 해당하는 타이머를 지울 수 있습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <p>当前时间为：<span id="clock"></span></p>
    <button onclick="stopClock(this);">停止</button><hr>
    <button onclick="delayedAlert(this);">2秒后弹出一个提示框</button>
    <button onclick="clearAlert();">取消</button>
    <script type="text/javascript">
        var intervalID;
        function showTime() {
            var d = new Date();
            document.getElementById("clock").innerHTML = d.toLocaleTimeString();
        }
        function stopClock(e) {
            clearInterval(intervalID);
            e.setAttribute(&#39;disabled&#39;, true)
        }
        intervalID = setInterval(showTime, 1000);
        var timeoutID;
        var that;
        function delayedAlert(e) {
            that = e;
            timeoutID = setTimeout(showAlert, 2000);
            e.setAttribute(&#39;disabled&#39;, true)
        }
        function showAlert() {
            alert(&#39;这是一个提示框。&#39;);
            that.removeAttribute(&#39;disabled&#39;);
        }
        function clearAlert() {
            clearTimeout(timeoutID);
            that.removeAttribute(&#39;disabled&#39;);
        }
    </script>
</body>
</html>

로그인 후 복사

실행 결과는 다음과 같습니다.

[추천 학습:

자바스크립트 고급 튜토리얼 자바스크립트 타이머에는 어떤 기능이 있나요? ]