L'animation de défilement de canevas ne fonctionne pas correctement

Question

Je suis en train de créer une chronologie de style de diagramme de Gantt en utilisant un élément de canevas html.

Je suis actuellement en train d'essayer d'ajouter la fonctionnalité qui permet à l'utilisateur de cliquer sur un bouton suivant/précédent pour faire défiler le diagramme de Gantt pour afficher des heures plus tôt ou plus tard.

La façon dont je fais cela est d'avoir un span.adjustTime où l'ID contient une valeur en secondes pour l'heure à ajuster (par exemple 86400 pour un jour). J'essaye d'animer le défilement pour qu'il ressemble à un défilement, plutôt que de sauter d'un jour à l'avance.

J'ai un petit problème dans le calcul de mon timing, mais le script ci-dessous n'anime pas, mais saute directement sur l'heure finale. J'ai la fonction dessiner fonctionnant sur un setInterval distinct qui se met à jour toutes les secondes, donc j'espère que ce n'est pas un problème de minuteries contradictoires sur la même fonction sur le même élément et les mêmes données.

jQuery('span.adjustTime').click(function() { 

    var adjustBy = parseInt(jQuery(this).attr('id').replace('a', '')); 
    var data = jQuery('img#logo').data(); 

    for(var m = 1; m >= 30; m++) { 
     gantt.startUnixTime = gantt.startUnixTime + (adjustBy * (m * 0.001)); 

     var moveTimer = setTimeout(function() { 
      draw(document.getElementById('gantt'), data, gantt); 

     }, 1000); 

     if (m == 30) { 
      clearTimeout(moveTimer); 
     } 
    } 
}); 

Answer 1

Dans la boucle for vous appelez setTimeout 30 fois, chaque fois avec la même valeur de délai d'attente de 1000. Ainsi, après 1000 millisecondes 30 fonctions programmées seront exécutées à peu près en même temps. Je suppose que ce n'est pas ce que vous vouliez. Si vous voulez une animation de 30 images de plus de 1000 millisecondes, le setTimeout devrait ressembler à:

setTimeout(function() { ... }, 1000/30 * m) 

Notez également que les 30 fonctions programmées verront la même valeur gantt.startUnixTime, puisque le même objet (gantt) est passé à tous, et quand ils s'exécutent, la boucle for est terminée il y a déjà longtemps.