Πώς να ορίσετε χρονική καθυστέρηση σε javascript

Χρησιμοποιήστε την setTimeout():

var delayInMilliseconds = 1000; //1 second

setTimeout(function() {
  //your code to be executed after 1 second
}, delayInMilliseconds);

Αν θέλετε να το κάνετε χωρίς setTimeout: Ανατρέξτε στην αυτή την ερώτηση.

setTimeout(function(){

}, 500); 

Τοποθετήστε τον κώδικά σας μέσα στο { }

500 = 0,5 δευτερόλεπτα

2200 = 2,2 δευτερόλεπτα

κ.λπ.

Υπάρχουν δύο (κυρίως χρησιμοποιούμενοι) τύποι συνάρτησης χρονοδιακόπτη στη javascript setTimeout και setInterval (other)

Και οι δύο αυτές μέθοδοι έχουν την ίδια υπογραφή. Παίρνουν ως παράμετρο μια συνάρτηση ανάκλησης και το χρόνο καθυστέρησης.

Η setTimeout εκτελείται μόνο μία φορά μετά την καθυστέρηση ενώ η setInterval συνεχίζει να καλεί τη συνάρτηση ανάκλησης μετά από κάθε χιλιοστά του χιλιοστού της καθυστέρησης.

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

clearTimeout και clearInterval και οι δύο αυτές μέθοδοι λαμβάνουν ένα ακέραιο αναγνωριστικό που επιστρέφεται από τις παραπάνω συναρτήσεις setTimeout και setInterval.

Παράδειγμα:

setTimeout

alert("before setTimeout");

setTimeout(function(){
        alert("I am setTimeout");
   },1000); //delay is in milliseconds 

  alert("after setTimeout");

Αν εκτελέσετε τον παραπάνω κώδικα θα δείτε ότι ειδοποιεί πριν το setTimeout και στη συνέχεια μετά το setTimeout τελικά ειδοποιεί Είμαι setTimeout μετά από 1sec (1000ms)

Αυτό που μπορείτε να παρατηρήσετε από το παράδειγμα είναι ότι το setTimeout(...) είναι ασύγχρονο, που σημαίνει ότι δεν περιμένει να παρέλθει ο χρονοδιακόπτης πριν προχωρήσει στην επόμενη εντολή δηλαδή alert("after setTimeout");

Παράδειγμα:

setInterval

alert("before setInterval"); //called first

 var tid = setInterval(function(){
        //called 5 times each time after one second  
      //before getting cleared by below timeout. 
        alert("I am setInterval");
   },1000); //delay is in milliseconds 

  alert("after setInterval"); //called second

setTimeout(function(){
     clearInterval(tid); //clear above interval after 5 seconds
},5000);

Αν τρέξετε τον παραπάνω κώδικα θα δείτε ότι ειδοποιεί πριν το setInterval και μετά μετά το setInterval τελικά ειδοποιεί Είμαι setInterval 5 φορές μετά από 1sec (1000ms) επειδή το setTimeout καθαρίζει το χρονόμετρο μετά από 5 δευτερόλεπτα ή αλλιώς κάθε 1 δευτερόλεπτο θα λαμβάνετε ειδοποίηση Είμαι setInterval Απεριόριστα.

Πώς το κάνει αυτό το πρόγραμμα περιήγησης εσωτερικά;

Θα σας εξηγήσω εν συντομία.

Για να το καταλάβετε αυτό θα πρέπει να ξέρετε για την ουρά γεγονότων στην javascript. Υπάρχει μια ουρά γεγονότων που υλοποιείται στο πρόγραμμα περιήγησης. Κάθε φορά που ενεργοποιείται ένα συμβάν στο js, όλα αυτά τα συμβάντα (όπως κλικ κ.λπ...) προστίθενται σε αυτή την ουρά. Όταν το πρόγραμμα περιήγησης δεν έχει τίποτα να εκτελέσει, παίρνει ένα συμβάν από την ουρά και τα εκτελεί ένα προς ένα.

Τώρα, όταν καλείτε το setTimeout ή το setInterval, το callback σας καταχωρείται σε έναν χρονοδιακόπτη στο πρόγραμμα περιήγησης και προστίθεται στην ουρά συμβάντων μετά τη λήξη του συγκεκριμένου χρόνου και τελικά το javascript παίρνει το συμβάν από την ουρά και το εκτελεί.

Αυτό συμβαίνει έτσι, επειδή η μηχανή javascript είναι single threaded και μπορεί να εκτελέσει μόνο ένα πράγμα κάθε φορά. Έτσι, δεν μπορούν να εκτελέσουν άλλο javascript και να παρακολουθούν το χρονοδιακόπτη σας. Αυτός είναι ο λόγος για τον οποίο αυτοί οι χρονοδιακόπτες είναι εγγεγραμμένοι στο πρόγραμμα περιήγησης (το πρόγραμμα περιήγησης δεν είναι single threaded) και μπορεί να παρακολουθεί το χρονοδιακόπτη και να προσθέτει ένα συμβάν στην ουρά μετά τη λήξη του χρονοδιακόπτη.

το ίδιο συμβαίνει και για το setInterval μόνο που σε αυτή την περίπτωση το συμβάν προστίθεται στην ουρά ξανά και ξανά μετά το καθορισμένο χρονικό διάστημα μέχρι να διαγραφεί ή να ανανεωθεί η σελίδα του προγράμματος περιήγησης.

Σημείωση &gt, Η παράμετρος καθυστέρησης που περνάτε σε αυτές τις συναρτήσεις είναι η ελάχιστη καθυστέρηση για την εκτέλεση της επανάκλησης. Αυτό συμβαίνει επειδή μετά τη λήξη του χρονοδιακόπτη το πρόγραμμα περιήγησης προσθέτει το συμβάν στην ουρά για να εκτελεστεί από την μηχανή javascript, αλλά η εκτέλεση του callback εξαρτάται από το τη θέση των συμβάντων στην ουρά και καθώς η μηχανή είναι μονόκλωνη. θα εκτελέσει όλα τα συμβάντα στην ουρά ένα προς ένα.

Ως εκ τούτου, το callback σας μπορεί κάποια στιγμή να πάρει περισσότερο από τον καθορισμένο χρόνο καθυστέρησης για να κληθεί ειδικά όταν ο άλλος κώδικάς σας μπλοκάρει το νήμα και δεν του δίνει χρόνο να επεξεργαστεί ό,τι υπάρχει στην ουρά.

Και όπως ανέφερα η javascript είναι μονόκλωνη. Έτσι, αν μπλοκάρετε το νήμα για πολύ ώρα.

Όπως αυτός ο κώδικας

while(true) { //infinite loop 
}

Ο χρήστης σας μπορεί να λάβει ένα μήνυμα που λέει η σελίδα δεν ανταποκρίνεται.