Vueはシンプルなタイマーコンポーネントを実装します

プロジェクトを実行すると、リアルタイム更新、広告アニメーションの連続表示などの要件に遭遇することは避けられません。最近では、ビジネスニーズに基づいて、通話時間を累積するためのタイマーを実装する必要があります。このとき、タイマーはコード段階に入る必要があります。実際、タイマーの場合、その原理はタイマーを通じて実現されます。そのため、ビジネス要件を書く前に、タイマーに関するいくつかの知識についてお話しします。

window オブジェクトには、タイマー効果を実装するための 2 つのメソッド、window.setTimeout() と window.setInterval が用意されています。

Javascript では、コードは通常同期的に実行されますが、タイマーは非同期的に実行されます。

window.setTimeout(callback,delay); //callback: コールバック関数 delay: 時間間隔 window.setInterval(callback,delay);

タイマーは、インターバルタイマーsetIntervalと遅延タイマーsetTimeoutに分かれています。

では、この2つの違いは何でしょうか?

setInterval は、指定された期間のサイクルで実行されます。通常、フォームを更新し、複雑なアニメーションをサイクルで実行するために使用されます。また、指定された時間に一部のフォームをリアルタイムで更新および同期するためにも使用されます。
setTimeout は、指定された時間後に 1 回だけ実行されます。たとえば、一部の Web サイトでは、初めてアクセスしたときにポップアップ広告が表示されます。通常は、setTimeout が使用されます。

タイマーの基本的な知識を理解した後、機能を実装できます。

html

<テンプレート>
    <div class="タイマー">
    <div>{{現在時刻}}</div>
    </div>
</テンプレート>

ジャバスクリプト

<スクリプト>
    エクスポートデフォルト{
    名前: 'タイマー'、
    データ （） {
     戻る {
      タイマー: null、
      現在時刻:"",
      時間: 0,
      分: 0,
      秒: 0
      }
    },
    作成された（）{
    this.timer = setInterval(this.startTimer, 1000);
    },
    破壊された（）{
    タイマー間隔をクリアします。
    },
    
    メソッド: {
    スタートタイマー() {
     // タイマーの蓄積によって発生する予期しないバグを回避するために、タイマーを開始する前にクリアすることをお勧めします。
     if(this.timer) {
   タイマー間隔をクリアします。
  }
     this.seconds += 1;
     if (this.seconds >= 60) {
      this.seconds = 0;
      this.minutes = this.minutes + 1;
     }
     (this.minutes>= 60)の場合{
      this.分 = 0;
      this.hour = this.hour + 1;
     }
     this.nowTime = this.toZero(this.hour): this.toZero(this.minutes): this.toZero(this.seconds)
    },
     toZero(時間番号) {
     timeNumber<10?"0"+timeNumber：timeNumber を返します
   },
 }
}
</スクリプト>

このように、シンプルなタイマーコンポーネントが実装されています。実は他にも実装のアイデアはあります。今後の開発で同様の要件に遭遇した場合は、参考にしてください。お役に立てれば幸いです。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

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