Neueste Web-Entwicklung Tutorials
 

JavaScript Timing-Events


1
2
3
4
5
6
7
8
9
10
11
12

JavaScript kann in Zeitintervallen ausgeführt werden.

Dies ist das Timing Ereignisse genannt.


Timing-Events

Das Fenster-Objekt können in festgelegten Zeitintervallen Ausführung von Code.

Diese Zeitintervalle sind Zeitereignisse genannt.

Die beiden wichtigsten Methoden mit JavaScript zu verwenden sind:

  • setTimeout( function, milliseconds )
    Führt eine Funktion, nach einer bestimmten Anzahl von Millisekunden warten.
  • setInterval( function, milliseconds )
    Gleiche wie setTimeout() , sondern wiederholt die Ausführung der Funktion kontinuierlich an .

Die setTimeout() und setInterval() sind beide Methoden des HTML - DOM Window - Objekt.


Die setTimeout() Methode

window.setTimeout(function, milliseconds);

Die window.setTimeout() Methode kann ohne das Fenster Präfix geschrieben werden.

Der erste Parameter ist eine Funktion ausgeführt werden soll.

Der zweite Parameter gibt die Anzahl der Millisekunden vor der Ausführung.

Beispiel

Klicken Sie auf eine Schaltfläche. 3 Sekunden warten, und die Seite wird alarmieren "Hallo":

<button onclick="setTimeout(myFunction, 3000)">Try it</button>

<script>
function myFunction() {
    alert('Hello');
}
</script>
Versuch es selber "

Wie die Hinrichtung zu stoppen?

Die clearTimeout() Methode stoppt die Ausführung der Funktion in angegebenen setTimeout() .

window.clearTimeout( timeoutVariable )

Die window.clearTimeout() Methode kann ohne das Fenster Präfix geschrieben werden.

Die clearTimeout() Methode verwendet die Variable aus zurück setTimeout() :

myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);

Wenn die Funktion nicht bereits ausgeführt worden ist , können Sie die Ausführung zu stoppen , indem Sie den Aufruf clearTimeout() Methode:

Beispiel

Dasselbe Beispiel wie oben, aber mit einer zusätzlichen "Stopp" -Taste:

<button onclick="myVar = setTimeout(myFunction, 3000)">Try it</button>

<button onclick="clearTimeout(myVar)">Stop it</button>
Versuch es selber "

Die setInterval() Methode

Die setInterval() Methode wiederholt eine gegebene Funktion in jedem gegebenen Zeitintervall.

window.setInterval(function, milliseconds);

Die window.setInterval() Methode kann ohne das Fenster Präfix geschrieben werden.

Der erste Parameter ist die Funktion ausgeführt werden.

Der zweite Parameter gibt die Länge des Zeitintervalls zwischen jeder Ausführung.

Dieses Beispiel führt eine Funktion namens "myTimer" einmal pro Sekunde (wie eine digitale Uhr).

Beispiel

Anzeige der aktuellen Uhrzeit:

var myVar = setInterval(myTimer, 1000);

function myTimer() {
    var d = new Date();
    document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
Versuch es selber "

Es gibt 1000 Millisekunden in einer Sekunde.


Wie die Hinrichtung zu stoppen?

Die clearInterval() Methode stoppt die Ausführungen der Funktion in der angegebenen setInterval() Methode.

window.clearInterval( timerVariable )

Die window.clearInterval( ) Methode kann ohne das Fenster Präfix geschrieben werden.

Die clearInterval() Methode verwendet die Variable aus zurück setInterval() :

myVar = setInterval(function, milliseconds);
clearInterval(myVar);

Beispiel

Dasselbe Beispiel wie oben, aber wir haben eine "Stoppzeit" Button hinzugefügt:

<p id="demo"></p>

<button onclick="clearInterval(myVar)">Stop time</button>

<script>
var myVar = setInterval(myTimer, 1000);
function myTimer() {
    var d = new Date();
    document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>
Versuch es selber "

Beispiele

Mehr Beispiele

Eine weitere einfache Timing

Eine Uhr mit einem Timing - Ereignis erstellt