Detaillierte Erklärung des JavaScript-Timer-Prinzips

Vorwort:

Auf vielen Seiten können wir Countdown- oder zeitbezogene Effekte sehen. Heute gibt Xiao Xiong einen Überblick über den Countdown in JavaScript.
Schauen wir uns zunächst den Timer an. In JS gibt es zwei Arten von Timern:

1. setTimeout()-Timer

Grammatik:

window.setTimeout(Funktion aufrufen, [Verzögerung in Millisekunden]);

Mit setTimeout() wird ein Timer gesetzt, der nach Ablauf der Zeit die aufgerufene Funktion ausführt.
Beispiel: Schreiben Sie eine Seite, auf der nach fünf Sekunden „Hallo“ angezeigt wird.

Der Code lautet wie folgt:

Fenster.setTimeout(Funktion(){
            alert('Hallo');
        },5000);

Die laufenden Ergebnisse sind:

Es ist zu beachten, dass:

• window kann weggelassen werden.
• Dieser Funktionsaufruf kann direkt als Funktion, als Funktionsname oder als Zeichenfolge „Funktionsname()“ geschrieben werden.
• Die Verzögerung in Millisekunden beträgt standardmäßig 0, wenn sie weggelassen wird. Wenn sie angegeben wird, muss sie in Millisekunden angegeben werden. Die aufrufende Funktion von setTimeout() wird auch Callback-Funktion genannt. Gewöhnliche Funktionen werden direkt in der Reihenfolge des Codes aufgerufen. Diese Funktion erfordert eine Wartezeit und wird erst aufgerufen, wenn die Zeit abgelaufen ist. Sie wird daher als Rückruffunktion bezeichnet.

2. Stoppen Sie den Timer setTimeout()

Was müssen wir tun, wenn wir einen Timer löschen möchten, nachdem wir ihn erstellt haben? Die Funktion zum Löschen des Timers wird wie folgt verwendet:

window.clearTimeout(Zeitüberschreitungs-ID)

clearTimeout() bricht einen zuvor durch den Aufruf von setTimeout() eingerichteten Timer ab.
Hier kann das Fenster weggelassen werden und der Parameter ist die Kennung des Timers.

Zum Beispiel:

Wenn wir es im obigen Fall vor dem angegebenen Ereignis stoppen möchten, können wir zuerst eine Klickschaltfläche hinzufügen und ein Ereignis zum Löschen des Timers für diese Schaltfläche hinzufügen. Der Vorgang ist:

  var hallo = fenster.setTimeout(function(){
            alert('Hallo');
        },5000);
        var btn = document.querySelector('Schaltfläche');
        btn.addEventListener('klicken',Funktion(){
            Fenster.ClearTimeout(hallo);
        })

Der laufende Effekt ist:

Es ist ersichtlich, dass, wenn wir nicht auf die Stopp-Schaltfläche klicken, nach fünf Sekunden „Hallo“ angezeigt wird. Nach dem Aktualisieren der Seite wird beim Klicken auf die Schaltfläche kein Popup-Fenster angezeigt, egal wie lange es dauert, und der Timer wird erfolgreich gelöscht.

3. setInterval()-Timer

Schauen wir uns einen anderen Timertyp an.

window.setInterval(Rückruffunktion, [Intervall in Millisekunden]);

setInterval() ruft wiederholt eine Funktion auf und ruft dabei jedes Mal die Rückruffunktion einmal auf.

• Fenster kann weggelassen werden.
• Die aufrufende Funktion kann direkt als Funktion, als Funktionsname oder als Zeichenfolge „Funktionsname()“ geschrieben werden.
• Wenn die Anzahl der Millisekunden weggelassen wird, ist der Standardwert 0. Wenn er geschrieben wird, muss er Millisekunden sein, was bedeutet, dass diese Funktion automatisch alle eine bestimmte Anzahl von Millisekunden aufgerufen wird.
• Wir weisen einem Timer häufig eine Kennung zu.
• Die erste Ausführung erfolgt ebenfalls nach dem Millisekundenintervall und danach alle Millisekunden.

Zum Beispiel:

Schreiben wir einen Timer, der jede Sekunde „Hallo“ ausgibt. Der Code lautet:

  setzeIntervall(Funktion(){
            console.log('Hallo')
        },1000);

Der laufende Effekt ist:

4. Löschen Sie den Timer setInterval()

Auf ähnliche Weise können wir auch die Wirkung des Timers setInterval() löschen. Die Syntax lautet:

Fenster.ClearInterval(Intervall-ID);

clearInterval() bricht einen zuvor durch den Aufruf von setInterval() eingerichteten Timer ab.

Beachten:

• Fenster kann weggelassen werden.
• Der darin enthaltene Parameter ist die Kennung des Timers.

Beispielsweise haben wir jetzt zwei Schaltflächen. Durch Klicken auf eine kann der Timer gestartet werden, und durch Klicken auf die andere kann der Timer gelöscht werden. Die Vorgehensweise ist:

<Text>
    <button class='begin'>Start</button>
    <button class='stop'>Stopp</button>
    <Skript>
        var btn = document.querySelectorAll('Schaltfläche');
        var Timer = null;
        btn[0].addEventListener('klicken',function(){
            Timer = Intervall festlegen(Funktion(){
                console.log('Hallo');
            },1000)
        })
        btn[1].addEventListener('klicken',function(){
            Intervall löschen(Timer)
        })
</Skript>
</body>

Der laufende Effekt ist:

5. Elektronisches Uhrengehäuse

Wir können nun eine elektronische Uhr bauen, die das aktuelle Jahr, den Monat, den Tag, die Stunde, die Minute und die Sekunde anzeigt und deren automatische Änderung ermöglicht. Der Code lautet wie folgt:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
    <Stil>
        div {
            Breite: 500px;
            Rand: 100px automatisch;
            Schriftgröße: 25px;
        }
    </Stil>
</Kopf>
<Text>
    <div></div>
    <Skript>
        var div = document.querySelector('div');
        Funktion zeigeZeit(){
            var date = neues Datum();
            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+'Jahr'+m+'Monat'+d+'Tag'+h+'Stunde'+dm+'Minute'+ds+'Sekunde';
            div.innerHTML = str;
            setTimeout(showTime,1000);
        }
        window.onload = showTime();
    </Skript>
</body>
</html>

Der laufende Effekt ist:

Dies ist das Ende dieses Artikels über die Prinzipien von JavaScript-Timern. Weitere relevante Inhalte zu JavaScript-Timern finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!