Construirea unui cronometru simplu este ușor cu evenimentele de sincronizare native JavaScript. Puteți citi mai multe despre cele din acest articol.

Construirea temporizatorului de numărătoare inversă

Începeți prin declararea unei funcții goale numită startCountdown asta durează seconds ca argument:

function startCountdown(seconds) {
    
};

Vrem să urmărim secundele care trec odată cu pornirea temporizatorului, așa că folosiți let să declare o variabilă numită counter și setați-l egal cu seconds:

function startCountdown(seconds) {
  let counter = seconds;
}

Amintiți-vă că este cea mai bună practică să salvați funcția evenimentului de sincronizare într-o variabilă. Acest lucru face mult mai ușor să opriți temporizatorul mai târziu. Creați o variabilă numită interval și setați-l egal la setInterval():

function startCountdown(seconds) {
  let counter = seconds;
    
  const interval = setInterval();
}

Puteți trece direct o funcție către setInterval, deci să-i trecem o funcție de săgeată goală ca primul argument. De asemenea, dorim ca funcția să ruleze în fiecare secundă, deci treceți 1000 ca al doilea argument:

function startCountdown(seconds) {
  let counter = seconds;
    
  const interval = setInterval(() => {
    
  }, 1000);
}

Acum funcția la care am trecut setInterval va rula în fiecare secundă. De fiecare dată când rulează, vrem să înregistrăm valoarea curentă a counter la consolă înainte de a o dezincrementa:

function startCountdown(seconds) {
  let counter = seconds;
    
  const interval = setInterval(() => {
    console.log(counter);
    counter--;
  }, 1000);
}

Acum, dacă rulați funcția, veți vedea că funcționează, dar nu se oprește o singură dată counter este mai mic de 0:

startCountdown(5);

// Console Output // 
// 5
// 4
// 3
// 2
// 1
// 0 
// -1
// -2 

Pentru a remedia acest lucru, mai întâi scrieți un if declarație care se execută când counter este mai mic de 0:

function startCountdown(seconds) {
  let counter = seconds;
    
  const interval = setInterval(() => {
    console.log(counter);
    counter--;
      
    if (counter < 0 ) {
      
    }
  }, 1000);
}

Apoi în interiorul if declarație, ștergeți interval cu clearInterval și conectați un sir de sunet de alarmă la consolă:

function startCountdown(seconds) {
  let counter = seconds;
    
  const interval = setInterval(() => {
    console.log(counter);
    counter--;
      
    if (counter < 0 ) {
      clearInterval(interval);
      console.log('Ding!');
    }
  }, 1000);
}

Execuţie

Acum, când porniți cronometrul, ar trebui să vedeți următoarele:

startCountdown(5);

// Console Output // 
// 5
// 4
// 3
// 2
// 1
// 0 
// Ding!

Mai multe resurse

JavaScript Timing Events: setTimeout și setInterval