JavaScript タイマー原理の詳細な説明

多くのページで、カウントダウンや時間に関連したエフェクトを見ることができます。今日は、Xiao Xiong が JavaScript でのカウントダウンの概要を説明します。
まず、タイマーを見てみましょう。JS には 2 種類のタイマーがあります。

1. setTimeout() タイマー

文法：

window.setTimeout(関数を呼び出す、[ミリ秒単位の遅延]);

setTimeout()メソッドは、タイマーの期限が切れた後に呼び出された関数を実行するタイマーを設定するために使用されます。
たとえば、5 秒後に「Hello」とポップアップ表示されるページを作成します。

コードは次のとおりです。

window.setTimeout(関数(){
            アラート('こんにちは');
        },5000);

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

以下の点に注意してください。

window省略できます。
この関数呼び出しは、関数として直接記述することも、関数名として記述することも、文字列 'function name()' として記述することもできます。
ミリ秒単位の遅延は、省略した場合、デフォルトで 0 になります。指定する場合は、ミリ秒単位で指定する必要があります。 setTimeout()の呼び出し関数はコールバック関数とも呼ばれます。通常の関数はコード順に直接呼び出されます。この関数は待機時間が必要であり、時間切れになったときにのみ呼び出されるため、コールバック関数と呼ばれます。

2. setTimeout() タイマーを停止する

タイマーを作成したら、それをキャンセルしたい場合はどうすればよいでしょうか?タイマーをクリアする関数は次のように使用します。

ウィンドウのクリアタイムアウト(タイムアウトID)

clearTimeout()メソッドは、 setTimeout()を呼び出して以前に確立されたタイマーをキャンセルします。
ここで、ウィンドウは省略可能であり、パラメータはタイマーの識別子です。

例えば：

上記の場合、指定したイベントの前に停止したい場合は、まずクリックボタンを追加し、このボタンにタイマーをクリアするイベントを追加します。操作は次のとおりです。

  var hello = window.setTimeout(function(){
            アラート('こんにちは');
        },5000);
        var btn = document.querySelector('ボタン');
        btn.addEventListener('click',function(){
            ウィンドウをクリアします。
        })

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

停止ボタンをクリックしないと、5 秒後に「Hello」がポップアップ表示されることがわかります。ページを更新した後、ボタンをクリックすると、どれだけ時間がかかってもポップアップウィンドウは表示されず、タイマーが正常にクリアされます。

3. setInterval() タイマー

別のタイプのタイマーを見てみましょう。

window.setInterval(コールバック関数、[ミリ秒単位の間隔]);

setInterval()メソッドは関数を繰り返し呼び出し、そのたびにコールバック関数を呼び出します。

window は省略できます。
呼び出し関数は、関数として直接記述することも、関数名または文字列 'function name()' として記述することもできます。
ミリ秒数を省略した場合、デフォルト値は 0 です。ミリ秒数を書き込む場合は、この関数が一定のミリ秒数ごとに自動的に呼び出されることを示すミリ秒数でなければなりません。
多くの場合、タイマーに識別子を割り当てます。
最初の実行もミリ秒間隔で実行され、その後はミリ秒ごとに実行されます。

例えば：

毎秒 'hello' を出力するタイマーを書いてみましょう。コードは次のとおりです。

  setInterval(関数(){
            console.log('こんにちは')
        },1000);

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

4. setInterval() タイマーをクリアする

同様に、setInterval() タイマーの効果もクリアできます。構文は次のとおりです。

ウィンドウをクリアします。

clearInterval()メソッドは、 setInterval()を呼び出して以前に確立されたタイマーをキャンセルします。

知らせ：
window は省略できます。
内部のパラメータはタイマーの識別子です。

たとえば、現在 2 つのボタンがあります。一方をクリックするとタイマーが開始され、もう一方をクリックするとタイマーがクリアされます。操作方法は次のとおりです。

<本文>
    <button class='begin'>開始</button>
    <button class='stop'>停止</button>
    <スクリプト>
        var btn = document.querySelectorAll('ボタン');
        var タイマー = null;
        btn[0].addEventListener('click',function(){
            タイマー = setInterval(関数(){
                console.log('こんにちは');
            },1000)
        })
        btn[1].addEventListener('click',function(){
            クリアインターバル(タイマー)
        })
</スクリプト>
</本文>

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

5. 電子時計ケース

これで、現在の年、月、日、時間、分、秒を表示し、自動的に変更できる電子時計を作成できます。コードは次のとおりです。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <スタイル>
        div {
            幅: 500ピクセル;
            マージン: 100px 自動;
            フォントサイズ: 25px;
        }
    </スタイル>
</head>
<本文>
    <div></div>
    <スクリプト>
        var div = document.querySelector('div');
        関数 showTime(){
            var date = 新しい Date();
            var y = date.getFullYear();
            var m = date.getMonth()+1;
            m = m>=10?m:'0'+m;
            var d = date.getDate();
            d = d>=10?d:'0'+d;
            var h = date.getHours();
            h = h>=10?h:'0'+h;
            var dm = date.getMinutes();
            dm = dm>=10?dm:'0'+dm;
            var ds = date.getSeconds();
            ds = ds>=10?ds:'0'+ds;
            var str = y+'年'+m+'月'+d+'日'+h+'時'+dm+'分'+ds+'秒';
            div.innerHTML = str;
            タイムアウトを設定します(showTime,1000);
        }
        ウィンドウのonload = showTime();
    </スクリプト>
</本文>
</html>

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

JavaScript タイマーの原理に関するこの記事はこれで終わりです。JavaScript タイマーに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: