07. JS Timing

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


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

Αυτά ονομάζονται συμβάντα χρονισμού.


Γεγονότα χρονισμού

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

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

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

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

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


Η μέθοδος setTimeout()

window.setTimeout(function, milliseconds);

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

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

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

Παράδειγμα

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

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

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

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


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

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

.window.clearTimeout(timeoutVariable)

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

Η μέθοδος 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>

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


Η μέθοδος setInterval()

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

window.setInterval(function, milliseconds);

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

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

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

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

Παράδειγμα

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

var myVar = setInterval(myTimer, 1000);

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

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

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


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

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

window.clearInterval(timerVariable)

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

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

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

Παράδειγμα

Το ίδιο παράδειγμα όπως παραπάνω, αλλά έχουμε προσθέσει ένα κουμπί “Stop time”:

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

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


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

Άλλος ένας απλός χρονισμός

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


Days
Hours
Minutes

07. JS Timing

Κοινοποίηση

Share on facebook
Share on twitter

Ακολουθήστε μας

Αρέσει σε %d bloggers: