Συμβάντα χρονισμού JavaScript

Πίνακας περιεχομένων

Εμφάνιση πίνακα περιεχομένων

Η JavaScript μπορεί να εκτελεστεί σε χρονικά διαστήματα.

Αυτό ονομάζεται χρονικά συμβάντα.

Συμβάντα χρονισμού

Το αντικείμενο παράθυρο επιτρέπει την εκτέλεση κώδικα σε καθορισμένα χρονικά διαστήματα.

Αυτά τα χρονικά διαστήματα ονομάζονται χρονικά συμβάντα.

Οι δύο βασικές μέθοδοι χρήσης με JavaScript είναι:

setTimeout(συνάρτηση, χιλιοστά του δευτερολέπτου)
Εκτελεί μια συνάρτηση, αφού περιμένει έναν καθορισμένο αριθμό χιλιοστών του δευτερολέπτου.
setInterval(συνάρτηση, χιλιοστά του δευτερολέπτου)
Ίδιο με το setTimeout(), αλλά επαναλαμβάνει την εκτέλεση της συνάρτησης συνεχώς.

Το setTimeout() και το setInterval() είναι και οι δύο μέθοδοι του αντικειμένου του παραθύρου HTML DOM.

Η μέθοδος setTimeout().

window.setTimeout(function, milliseconds);

Η μέθοδος window.setTimeout() μπορεί να γραφτεί χωρίς το πρόθεμα παραθύρου.

Η πρώτη παράμετρος είναι μια συνάρτηση που πρέπει να εκτελεστεί.

Η δεύτερη παράμετρος υποδεικνύει τον αριθμό των χιλιοστών του δευτερολέπτου πριν από την εκτέλεση.

Παράδειγμα

Κάντε κλικ σε ένα κουμπί. Περιμένετε 3 δευτερόλεπτα και η σελίδα θα ειδοποιήσει "Hello":

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

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

Δοκιμάστε το μόνοι σας →

<!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>

Πώς να σταματήσετε την εκτέλεση;

Η μέθοδος clearTimeout() σταματά την εκτέλεση της συνάρτησης καθορίζεται στο setTimeout().

window.clearTimeout(timeoutVariable)

Η μέθοδος window.clearTimeout() μπορεί να γραφτεί χωρίς το πρόθεμα παραθύρου.

Η μέθοδος clearTimeout() χρησιμοποιεί τη μεταβλητή επέστρεψε από setTimeout():

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

Εάν η συνάρτηση δεν έχει ήδη εκτελεστεί, μπορείτε να σταματήσετε την εκτέλεση καλώντας το clearTimeout() μέθοδος:

Παράδειγμα

Το ίδιο παράδειγμα με το παραπάνω, αλλά με ένα πρόσθετο κουμπί "Διακοπή":

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

Δοκιμάστε το μόνοι σας →

<!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>

Η μέθοδος setInterval().

Η μέθοδος setInterval() επαναλαμβάνει μια δεδομένη συνάρτηση σε κάθε δεδομένη χρονικό διάστημα.

window.setInterval(function, milliseconds);

Η μέθοδος window.setInterval() μπορεί να γραφτεί χωρίς το πρόθεμα παραθύρου.

Η πρώτη παράμετρος είναι η συνάρτηση που θα εκτελεστεί.

Η δεύτερη παράμετρος υποδεικνύει τη διάρκεια του χρονικού διαστήματος μεταξύ του καθενός εκτέλεση.

Αυτό το παράδειγμα εκτελεί μια συνάρτηση που ονομάζεται "myTimer" μία φορά κάθε δευτερόλεπτο (όπως μια ψηφιακή παρακολουθώ).

Παράδειγμα

Εμφάνιση της τρέχουσας ώρας:

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

Δοκιμάστε το μόνοι σας →

<!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>

Υπάρχουν 1000 χιλιοστά του δευτερολέπτου σε ένα δευτερόλεπτο.

Πώς να σταματήσετε την εκτέλεση;

Η μέθοδος clearInterval() σταματά τις εκτελέσεις της συνάρτησης καθορίζεται στη μέθοδο setInterval().

window.clearInterval(timerVariable)

Η μέθοδος window.clearInterval() μπορεί να γραφτεί χωρίς το πρόθεμα παραθύρου.

Η μέθοδος clearInterval() χρησιμοποιεί τη μεταβλητή που επιστρέφεται από το setInterval():

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

Παράδειγμα

Το ίδιο παράδειγμα με το παραπάνω, αλλά έχουμε προσθέσει ένα κουμπί "Διακοπή χρόνου":

<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>

Δοκιμάστε το μόνοι σας →

<!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>

Περισσότερα Παραδείγματα

Άλλο ένα απλό 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>

Ένα ρολόι που δημιουργήθηκε με ένα συμβάν χρονισμού

<!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>