Vue implementiert eine einfache Timer-Komponente

Bei der Durchführung eines Projekts stößt man unweigerlich auf Anforderungen wie Echtzeitaktualisierung, nacheinander erscheinende Werbeanimationen usw. In letzter Zeit ist es aufgrund der Geschäftsanforderungen erforderlich, einen Timer zum Sammeln der Anrufdauer zu implementieren. Zu diesem Zeitpunkt muss der Timer in unsere Codephase eintreten. Tatsächlich besteht das Prinzip des Timers darin, durch den Timer realisiert zu werden. Lassen Sie mich also, bevor ich die Geschäftsanforderungen schreibe, über einige Kenntnisse zu Timern sprechen.

Das Fensterobjekt bietet zwei Methoden zum Implementieren des Timereffekts, nämlich window.setTimeout() und window.setInterval.

In Javascript wird Code grundsätzlich synchron ausgeführt, Timer werden jedoch asynchron ausgeführt.

window.setTimeout(callback,delay); //callback: Rückruffunktion Verzögerung: Zeitintervall window.setInterval(callback,delay);

Timer werden in Intervalltimer setInterval und Verzögerungstimer setTimeout unterteilt.

Was ist also der Unterschied zwischen den beiden?

• setInterval wird in einem Zyklus mit einem angegebenen Zeitraum ausgeführt. Es wird im Allgemeinen verwendet, um Formulare zu aktualisieren und komplexe Animationen in einem Zyklus auszuführen. Es wird auch verwendet, um einige Formulare zu einem angegebenen Zeitpunkt in Echtzeit zu aktualisieren und zu synchronisieren.
• setTimeout wird nur einmal nach einer bestimmten Zeit ausgeführt. Einige Websites zeigen beispielsweise beim ersten Aufrufen eine Popup-Werbung an. Im Allgemeinen wird setTimeout verwendet.
  

Nachdem Sie die Grundkenntnisse zu Timern verstanden haben, können Sie die Funktionen implementieren.

HTML

<Vorlage>
    <div Klasse="Zeitgeber">
    <div>{{jetztZeit}}</div>
    </div>
</Vorlage>

Javascript

<Skript>
    Standard exportieren {
    Name: 'Timer',
    Daten () {
     zurückkehren {
      Timer: null,
      jetztZeit:"",
      Stunde: 0,
      Minuten: 0,
      Sekunden: 0
      }
    },
    erstellt () {
    dieser.timer = setzeInterval(dieser.startTimer, 1000);
    },
    zerstört () {
    : ClearInterval(dieser.Timer);
    },
    
    Methoden: {
    startTimer () {
     //Es wird empfohlen, den Timer vor dem Starten zu löschen, um unerwartete Fehler durch die Timer-Akkumulation zu vermeiden.
     wenn(dieser.timer) {
   : ClearInterval(dieser.Timer);
  }
     dies.Sekunden += 1;
     wenn (diese.Sekunden >= 60) {
      diese.Sekunden = 0;
      diese.Minuten = diese.Minuten + 1;
     }
     wenn (diese.Minuten>= 60) {
      diese.Minuten = 0;
      diese.Stunde = diese.Stunde + 1;
     }
     this.nowTime = this.toZero(this.hour): this.toZero(this.minutes): this.toZero(this.seconds)
    },
     toZero(Zeitzahl) {
     Rückgabewert Zeitzahl<10?"0"+Zeitzahl: Zeitzahl
   },
 }
}
</Skript>

Auf diese Weise wird eine einfache Timer-Komponente implementiert. Tatsächlich gibt es noch weitere Implementierungsideen. Wenn Sie bei zukünftigen Entwicklungen auf ähnliche Anforderungen stoßen, können Sie sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.