Pourquoi « setTimeout() » et « setInterval() » de JavaScript sont-ils inexacts, et comment puis-je créer une minuterie plus précise ?

Minuterie JavaScript précise : une analyse

De nombreux développeurs utilisent généralement les méthodes setTimeout() ou setInterval() pour créer des minuteries. Cependant, ces méthodes manquent de garanties d’exactitude. Ils peuvent rencontrer des décalages arbitraires, s'écartant du rythme prévu.

Causes d'inexactitude

Le problème inhérent découle du mécanisme utilisé par setTimeout() et setInterval(). Ces fonctions s'appuient sur la boucle d'événements du navigateur, dont l'exécution à des intervalles cohérents n'est pas garantie. Le temps d'exécution réel peut varier en fonction de la charge du navigateur, des ressources système et d'autres facteurs.

Création de minuteries précises

Pour résoudre ce problème, les développeurs doivent plutôt exploiter le Objet de date pour obtenir des horodatages précis (à la milliseconde près). Par la suite, ils doivent baser leur logique sur la valeur de l'heure actuelle plutôt que de se fier au nombre d'exécutions.

Pour les minuteries ou horloges simples, maintenir explicitement la différence de temps est une approche viable :

var start = Date.now();
setInterval(function() {
    var delta = Date.now() - start; // milliseconds elapsed since start
    // ...
    // Output in seconds
    console.log(Math.floor(delta / 1000));
}, 1000);

Cependant, cette technique peut conduire à des valeurs instables en raison de retards potentiels dans l'exécution de l'intervalle. Pour atténuer ce problème, les développeurs peuvent envisager de mettre à jour l'intervalle plus fréquemment, par exemple toutes les 100 ms.

Techniques avancées : minuteries auto-ajustables

Pour des intervalles constants sans dérive, l'auto-ajustement -Le réglage des minuteries offre une solution avancée. Ces minuteries ajustent dynamiquement le délai entre les exécutions ultérieures en fonction du temps réellement écoulé :

var interval = 1000; // ms
var expected = Date.now() + interval;
setTimeout(step, interval);
function step() {
    var dt = Date.now() - expected; // drift
    if (dt > interval) {
        // Handling severe drift here
    }
    // ... Perform desired action

    expected += interval;
    setTimeout(step, Math.max(0, interval - dt)); // Adjust delay to correct for drift
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!