Est-il une façon plus précise afin de créer un Javascript timer que setTimeout?

.

REF; http://www.sitepoint.com/creating-accurate-timers-in-javascript/

Ce site écopé moi sur une grande échelle.

Vous pouvez utiliser l'horloge du système pour compenser la minuterie de l'inexactitude. Si vous exécutez une fonction de synchronisation comme une série de setTimeout appels — chaque instance d'appeler le prochain — alors tout ce que vous avez à faire pour le garder précis, c'est exactement la façon dont il est inexact, et de soustraire cette différence à partir de la prochaine itération:

var start = new Date().getTime(),  
    time = 0,  
    elapsed = '0.0';  
function instance()  
{  
    time += 100;  
    elapsed = Math.floor(time / 100) / 10;  
    if(Math.round(elapsed) == elapsed) { elapsed += '.0'; }  
    document.title = elapsed;  
    var diff = (new Date().getTime() - start) - time;  
    window.setTimeout(instance, (100 - diff));  
}  
window.setTimeout(instance, 100);  

Cette méthode permettra de réduire au minimum la dérive et de réduire les imprécisions par plus de 90%.

Il fixe mes questions, j'espère que ça aide

shog9 la réponse est à peu près ce que je dis, bien que je serais ajouter ce qui suit à propos de l'INTERFACE utilisateur et d'animation d'événements:

Si vous avez une boîte qui est censé le faire glisser sur l'écran, s'étendent vers le bas, puis fondu dans son contenu, n'essayez pas de faire tous les trois événements distincts avec des délais programmée pour faire le feu l'un après l'autre - utilisez des rappels, donc une fois que le premier événement est terminé le faisant glisser les appels de l'expanseur, une fois cela fait, elle appelle le fader. jQuery pouvez le faire facilement, et je suis sûr que d'autres bibliothèques peuvent ainsi.

Si vous utilisez setTimeout() de céder rapidement le navigateur il est donc thread de l'INTERFACE utilisateur de rattraper toutes les tâches qu'il doit faire (comme la mise à jour de l'onglet ou de ne pas montrer le Long d'exécuter le Script de dialogue), il y a une nouvelle API appelée Efficace Script Rendement, aka, setImmediate() qui peuvent travailler un peu mieux pour vous.

setImmediate() fonctionne de façon très similaire aux setTimeout(), mais il peut l'exécuter immédiatement si le navigateur n'a rien d'autre à faire. Dans beaucoup de situations où vous utilisez setTimeout(..., 16) ou setTimeout(..., 4) ou setTimeout(..., 0) (c'est à dire que vous souhaitez que le navigateur d'exécuter n'importe quel suspens thread d'INTERFACE utilisateur tâches et ne montrent pas une Longue Course Script de dialogue), vous pouvez simplement remplacer votre setTimeout() avec setImmediate(), l'abandon de la deuxième (milliseconde) argument.

La différence avec setImmediate() est qu'il est fondamentalement un rendement; si le navigateur a parfois à faire sur le thread d'INTERFACE utilisateur (par exemple, mise à jour d'un onglet), il va faire avant de retourner à votre rappel. Toutefois, si le navigateur est déjà tous pris par son travail, le rappel spécifié dans setImmediate() consistera essentiellement à exécuter sans délai.

Malheureusement, il n'est actuellement pris en charge dans IE9+, comme il existe des repousser de l'autre les fournisseurs de navigateur.

Il y a un bon polyfill disponible, si vous souhaitez l'utiliser et j'espère que les autres navigateurs appliquent à un certain point.

Si vous utilisez setTimeout() pour l'animation, requestAnimationFrame est votre meilleur pari que votre code fonctionne en synchronisation avec la fréquence d'actualisation du moniteur.

Si vous utilisez setTimeout() sur un ralentissement de la cadence, par exemple, une fois tous les 300 millisecondes, vous pouvez utiliser une solution similaire à ce que user1213320 suggère, où vous surveiller combien de temps il a été depuis le dernier timestamp votre minuterie couru et de compenser pour tout retard. Une amélioration est que vous pouvez utiliser la nouvelle Haute Résolution En Temps interface (aka window.performance.now()) au lieu de Date.now() pour obtenir plus de milliseconde à l'heure actuelle.

Voici un exemple de démo Shog9 de la suggestion. Cela remplit un jquery, la barre de progression en douceur sur les 6 secondes, puis redirige vers une autre page, une fois qu'il est rempli:

var TOTAL_SEC = 6;
var FRAMES_PER_SEC = 60;
var percent = 0;
var startTime = new Date().getTime();

setTimeout(updateProgress, 1000 / FRAMES_PER_SEC);

function updateProgress() {
    var currentTime = new Date().getTime();

    //1000 to convert to milliseconds, and 100 to convert to percentage
    percent = (currentTime - startTime) / (TOTAL_SEC * 1000) * 100;

    $("#progressbar").progressbar({ value: percent });

    if (percent >= 100) {
        window.location = "newLocation.html";
    } else {
        setTimeout(updateProgress, 1000 / FRAMES_PER_SEC);
    }                 
}

Déteste dire ça, mais je ne pense pas qu'il y est une façon de résoudre cela. Je pense que cela dépend sur le système client, bien que, d'un moteur javascript plus rapide ou la machine peut faire légèrement plus précis.

Il y a certainement une limite. Pour vous donner un peu de perspective, le navigateur Chrome de Google vient de sortir est assez rapide qu'il peut exécuter setTimeout(function() {}, 0) dans 15 à 20 ms alors que les anciens moteurs Javascript a pris des centaines de millisecondes pour l'exécution de cette fonction. Bien que setTimeout utilise millisecondes, pas de javascript de la machine virtuelle à ce point dans le temps peut exécuter du code avec précision.

JavaScript délais d'attente ont un defacto limite de 10-15ms (je ne suis pas sûr de ce que vous faites pour obtenir 200ms, sauf si vous êtes en train de faire 185ms de réels js exécution). Cela est dû à windows standard résolution du timer de 15ms, le seul moyen de faire mieux, c'est d'utiliser des Fenêtres supérieures de la résolution des minuteries qui est un vaste système de réglage peut donc vis avec d'autres applications sur le système et aussi la mâche de vie de la batterie (Chrome a un bug d'Intel sur cette question).

Le standard de facto de 10-15ms est à cause de gens à l'aide de 0ms délais d'attente sur les sites web, mais alors le codage d'une manière qui suppose que suppose un 10-15ms délai d'attente (par exemple. js jeux qui prennent en 60fps mais demandez 0ms/cadre avec pas de delta logic donc le jeu/site/animation passe quelques ordres de grandeur plus rapide que prévu). Compte que, même sur les plates-formes qui n'ont pas windows minuterie problèmes, les navigateurs minuteur de limite de résolution de 10ms.

Vous pourriez envisager d'utiliser la html5 webaudio horloge qui utilise l'heure du système pour améliorer la précision de