JavaScriptタイマーにはどのような機能があるのでしょうか？-フロントエンドQ&A-php.cn

JavaScriptタイマーにはどのような機能があるのでしょうか？

青灯夜游

リリース： 2021-10-20 16:56:44

オリジナル

6562 人が閲覧しました

Javascript タイマーには 2 つの関数があります: 1. setTimeout() 関数は、指定された時間 (単位はミリ秒) 後に特定のコードを実行するために使用されます。コードは 1 回だけ実行されます。2. setInterval ()関数は、特定のコードを指定した周期(単位:ミリ秒)で繰り返し実行するために使用します。

JavaScriptタイマーにはどのような機能があるのでしょうか？

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

JavaScript タイマー (「タイマー」とも呼ばれる) は、生活における目覚まし時計と同様に、指定された時間が経過した後に特定のタスクを実行するために使用されます。

JavaScript では、タイマーを使用して特定のコードの実行を遅らせたり、特定のコードを一定の間隔で繰り返し実行したりできます。たとえば、タイマーを使用してページ上の広告を定期的に更新したり、リアルタイムクロックを表示したりできます。

JavaScript には、タイマーを設定する 2 つの方法、つまり setTimeout() と setInterval() が用意されています。これらの違いは次のとおりです。

説明JS setTimeout() 関数はコードを実行するために使用され、コードが実行されます。 1回だけ。

setTimeout()	指定された時間 (単位はミリ秒) 後に特定のコードを実行します。コードは 1 回だけ実行されます
setInterval()	指定された時間(単位:ミリ秒)に従って特定のコードを繰り返し実行します。タイマーは、clearInterval()関数が呼び出されない限り、自動的に停止しません。手動で停止するには、またはブラウザウィンドウを閉じる
	setTimeout()

JS setTimeout() 関数の構文形式は次のとおりです。

setTimeout(code,millisec)

ログイン後にコピー

パラメータの説明は次のとおりです。

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 必須。呼び出される関数、または実行されるコード文字列。

サンプルコードは次のとおりです。

<!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 キャンセルタイマー

JavaScriptタイマーにはどのような機能があるのでしょうか？ setTimeout() または setInterval() を使用してタイマーを設定する場合、両方のメソッドでタイマーの一意の ID が生成されます。ID は正の整数値であり、「タイマー識別子」とも呼ばれます。この ID を使用すると、その ID に対応するタイマーをクリアできます。

clearTimeout() 関数または clearInterval() 関数を使用して、それぞれ setTimeout() 関数または setInterval() 関数によって作成されたタイマーをクリアできます。 clearTimeout() または clearInterval() 関数を呼び出すときは、タイマーの一意の 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>

ログイン後にコピー

実行結果は次のとおりです。

[推奨学習:

JavaScript 上級チュートリアル

]

以上がJavaScriptタイマーにはどのような機能があるのでしょうか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。