JavaScript-Timing-Ereignisse


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


JavaScript kann in Zeitintervallen ausgeführt werden.

Dies nennt man Timing-Ereignisse.

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

Timing-Ereignisse

Das window-Objekt ermöglicht die Ausführung von Code in bestimmten Zeitintervallen.

Diese Zeitintervalle werden als Timing-Ereignisse bezeichnet.

Die beiden wichtigsten Methoden zur Verwendung mit JavaScript sind:

  • setTimeout(function, milliseconds)
    Führt eine Funktion aus, nachdem eine bestimmte Anzahl von Millisekunden gewartet wurde.

  • setInterval(function, milliseconds)
    Dasselbe wie setTimeout(), aber wiederholt die Ausführung der Funktion kontinuierlich.

setTimeout() und setInterval() sind beide Methoden des HTML-DOM-Fensterobjekts.


Die setTimeout()-Methode

window.setTimeout(function, milliseconds);

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

Der erste Parameter ist eine auszuführende Funktion.

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

Beispiel

Klicken Sie auf eine Schaltfläche. Warten Sie 3 Sekunden und die Seite meldet „Hallo“:

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

    <script>
function myFunction() {
  alert('Hello');
    }
</script>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Timing</h2>

<p>Click "Try it". Wait 3 seconds, and the page will alert "Hello".</p>

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

<script>
function myFunction() {
  alert('Hello');
}
</script>

</body>
</html>


Wie kann man die Ausführung stoppen?

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

window.clearTimeout(timeoutVariable)

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

Die Methode clearTimeout() verwendet die Variable zurückgegeben von setTimeout():

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

Wenn die Funktion noch nicht ausgeführt wurde, können Sie die Ausführung stoppen, indem Sie clearTimeout() aufrufen Methode:

Beispiel

Gleiches Beispiel wie oben, jedoch mit zusätzlicher Schaltfläche „Stopp“:

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

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Timing</h2>

<p>Click "Try it". Wait 3 seconds. The page will alert "Hello".</p>
<p>Click "Stop" to prevent the first function to execute.</p>
<p>(You must click "Stop" before the 3 seconds are up.)</p>

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

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

<script>
function myFunction() {
  alert("Hello");
}
</script>
</body>
</html>

Die setInterval()-Methode

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

window.setInterval(function, milliseconds);

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

Der erste Parameter ist die auszuführende Funktion.

Der zweite Parameter gibt die Länge des Zeitintervalls zwischen den einzelnen Parametern an Ausführung.

In diesem Beispiel wird einmal pro Sekunde eine Funktion namens „myTimer“ ausgeführt (wie eine digitale Funktion). betrachten).

Beispiel

Aktuelle Uhrzeit anzeigen:

setInterval(myTimer, 1000);
 
function myTimer() {
  const d = new Date();
  document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Timing</h2>

<p>A script on this page starts this clock:</p>

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

<script>
setInterval(myTimer, 1000);

function myTimer() {
  const d = new Date();
  document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>

</body>
</html>

Eine Sekunde besteht aus 1000 Millisekunden.


Wie kann man die Ausführung stoppen?

Die Methode clearInterval() stoppt die Ausführung der Funktion in der setInterval()-Methode angegeben.

window.clearInterval(timerVariable)

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

Die Methode clearInterval() verwendet die von setInterval() zurückgegebene Variable:

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

Beispiel

Gleiches Beispiel wie oben, aber wir haben eine Schaltfläche „Zeit stoppen“ hinzugefügt:

<p id="demo"></p>
<button onclick="clearInterval(myVar)">Stop time</button>
 
<script>
let myVar = setInterval(myTimer, 1000);
 function myTimer() {
  const d = new Date();
  document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Timing</h2>

<p>A script on this page starts this clock:</p>

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

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

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

</body>
</html>

Mehr Beispiele

Ein weiteres einfaches Timing

<!DOCTYPE html>
<html>
<body>

<h2>JavaSript setTimeout()</h2>

<p id="demo">I will display when two, four, and six seconds have passed.</p>

<script>
setTimeout(myTimeout1, 2000) 
setTimeout(myTimeout2, 4000) 
setTimeout(myTimeout3, 6000) 

function myTimeout1() {
  document.getElementById("demo").innerHTML = "2 seconds";
}
function myTimeout2() {
  document.getElementById("demo").innerHTML = "4 seconds";
}
function myTimeout3() {
  document.getElementById("demo").innerHTML = "6 seconds";
}
</script>

</body>
</html>

Eine mit einem Timing-Ereignis erstellte Uhr

<!DOCTYPE html>
<html>

<body onload="startTime()">

<h2>JavaScript Clock</h2>

<div id="txt"></div>

<script>
function startTime() {
  const today = new Date();
  let h = today.getHours();
  let m = today.getMinutes();
  let s = today.getSeconds();
  m = checkTime(m);
  s = checkTime(s);
  document.getElementById('txt').innerHTML =  h + ":" + m + ":" + s;
  setTimeout(startTime, 1000);
}

function checkTime(i) {
  if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
  return i;
}
</script>

</body>
</html>