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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • 画像のシームレスなスクロールを実現する JavaScript タイマー
  • 期間限定フラッシュセール機能を実現するJavaScriptタイマー
  • JavaScript タイマーの詳細
  • JavaScriptタイマーの詳細な説明
  • JavaScript タイマーの種類の概要

<<:  CSS スタイルをプログラムで処理するためのサンプル コード

>>:  HTML割引価格計算の実装原理とスクリプトコード

推薦する

ドッカー専用倉庫港湾建設プロセス

1. 準備1.1 港ダウンロードハーバーダウンロードアドレス:リンクリンクの説明を追加し、必要なバー...

Vue は PDF ファイルのオンライン プレビューを実装します (pdf.js/iframe/embed を使用)

序文現在、私はコースウェア PPT のオンライン プレビューを必要とする高品質のコースに取り組んでい...

MySQL ストアド プロシージャの使用例の分析

この記事では、MySQL ストアド プロシージャの使用方法について説明します。ご参考までに、詳細は以...

jQuery+h5 で 9 マス抽選特殊効果を実現 (フロントエンドとバックエンドのコード)

序文:フロントエンド: jq+h5 で 9 グリッドのダイナミック効果を実現バックエンド: thin...

MySQLプロセスを安全かつ適切にシャットダウンする方法

序文この記事では、mysqld プロセスをシャットダウンするプロセスと、MySQL インスタンスを安...

Linuxは数字当てゲームのソースコードを実装する

シンプルな Linux 推測ゲームのソースコードゲームのルール:数字当てゲームは通常 2 人でプレイ...

CSS3でハートを描く

成果を達成する要件/機能: CSS + HTML を使用してハートを描く方法。分析:正方形と 2 つ...

Docker Swarmの概念と使用法の詳細な説明

Docker Swarm は、Docker によって開発されたコンテナ クラスター管理サービスです。...

MySql 共通クエリコマンド操作リスト

MYSQL でよく使用されるクエリ コマンド: mysql> select version()...

Centos7.X Linux システムに tomcat8 をインストールするためのグラフィック チュートリアル

1. Tomcatのインストールパスを作成する mkdir /usr/local/tomcat 2....

http:// の代わりに // を使用する利点は何ですか (アダプティブ https)

//デフォルトプロトコル/ デフォルト プロトコルの使用は、リソース アクセス プロトコルが現在の...

JavaScriptはボタンをクリックして4桁のランダムな検証コードを生成します

この記事の例では、ボタンをクリックすることで4桁のランダムな検証コードを生成するjsの具体的なコード...

Node.js コード実行をバイパスするためのヒントのまとめ

目次1. 子プロセス2. nodejsでのコマンド実行2.1 16進数エンコード2.2 ユニコードエ...

Linux ディスク パーティションの実装の原理と方法の分析

覚えて: IDE ディスク: 最初のディスクは hda、2 番目のディスクは hdb...最初のディ...

MySQLの結合の基本原理についての簡単な説明

目次結合アルゴリズム駆動テーブルと非駆動テーブルの違い1. 単純なネストループ結合、単純なネスト、イ...