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割引価格計算の実装原理とスクリプトコード

推薦する

CentOS 起動時にカーネルモジュール overlayfs 操作を自動的にロードする

CentOS でカーネル モジュールを自動的にロードするには、/etc/sysconfig/modu...

MYSQL トランザクション チュートリアル Yii2.0 マーチャント引き出し機能

序文私はプログラマーとしてスタートした PHP プログラマーです。これまで、トレーニング コースで勉...

Nginx でバージョン番号を隠したり偽造したりする方法

1. デフォルトでアクセスするには、curl コマンドを使用します。 # curl -I http:...

Vue3 トランジションアニメーションの落とし穴記録について

目次背景問題の場所さらなる分析要約する背景私のコース「Vue 3 エンタープライズレベルの音楽アプリ...

dockerを使用してTomcatをデプロイし、Skywalkingに接続する

目次1. 概要2. dockerを使用してTomcatをデプロイし、Skywalkingに接続する要...

CSS3は赤い封筒を振る効果を実現します

赤い封筒の揺れ効果を実現するには要件があります。これまでやったことがないので、記録しておきます。ヘヘ...

JavaScript の構造化代入の一般的なシナリオと例 5 つ

目次序文1. データを抽出する2. エイリアス値3. 動的プロパティ4. オブジェクトの分解における...

Linux での Apache サービスの展開と構成

目次1 Apacheの役割2 Apacheのインストール3. Apacheを有効にする4 Apach...

レンダリング関数と JSX の詳細

目次1. 基本2. ノード、ツリー、仮想DOM 1. 仮想DOM 3. createElementパ...

プロセスごとにネットワーク帯域幅を監視する Linux ツール Nethogs のインストールと展開

概要Linux 用のオープン ソース ネットワーク監視ツールは数多くあります。たとえば、帯域幅の使用...

Linux システムで jmeter を実行し、ローカル メモリを最適化する方法の詳細な説明

1. Linuxシステムにクロスシステムファイル転送ツールをインストールするルートユーザーのルートデ...

JS ES6コーディング標準の詳細な説明

目次1. ブロックスコープ1.1. let は var を置き換える1.2. グローバル定数とスレッ...

CSSを使用して、頻繁に表示される奇妙なボタンを簡単に実装します。

背景グループでは、CSS を使用してインセット コーナー ボタンを実装する方法や、矢印付きのボタンを...

Linux での MySQL データベースのマスター スレーブ同期レプリケーション構成

Linux での MySQL データベースのマスター/スレーブ同期構成の利点は、この方法をバックアッ...

略語マークと頭字語マーク

<abbr>タグと<acronym>タグは、Web ページに表示される略語と...