Strange comportement javascript, que pourrait-il se passer ici?

Question

Tenir compte de la fonction javascript suivante:

function bs_animate_percentage(elem,style,unit,from,to,time) { 
    if(!elem) return; 

    console.log("first elem", elem); 
    var start = new Date().getTime(), 
     timer = setInterval(function() { 
      console.log("second elem", elem); 
      console.log("time", time); 
      var step = Math.min(1,(new Date().getTime()-start)/time); 
      elem.style[style] = (from+step*(to-from))+unit; 
      if(step == 1) clearInterval(timer); 
     },25); 
    elem.style[style] = from+unit; 
} 

Cette fonction doit animer une barre de chargement, il a été pris d'une autre question StackOverflow. Je voulais aussi ajouter un changement de texte à l'animation, pour lequel j'ai besoin du parent de l'élément initial.

Quand je lance cette fonction, avec les paramètres suivants, la console enregistre les valeurs suivantes:

bs_animate_percentage(document.getElementById("progress-bar"), 'width', '%', 0, 100, 60000); 

    *** LOGS *** 
    "first elem", <div....> (the selected div) 
    "second elem", undefiend 
    "time", 600000 

Fondamentalement, l'intérieur de la fonction principale, elem est connu et a la valeur qui est attendue. Mais à l'intérieur de la fonction anonyme, elem est déconnecté comme non défini, si j'essaie de récupérer son parent, il est indéfini aussi, et pourtant, l'attribut style fonctionne comme prévu, comme dans, la largeur de l'elem change. J'ai expérimenté cela en chrome, quel pourrait être le problème ici?

EDIT: J'ai également vérifié dans Firefox, mais étrangement, là les résultats corrects sont passés dans le deuxième journal de console. Cela doit être quelque chose de spécifique à Chrome, mais je ne sais pas quoi ...

EDIT2: Quoi de plus étrange, en essayant de répliquer ce comportement dans jsfiddle, il ne persiste pas, ni dans Chrome ni Firefox . Où devrais-je chercher le problème alors?

Answer 1

Je suis assez sûr que la variable elem n'est pas définie pendant cette période. Et ma prédiction est que cela peut parfois passer. L'une des façons de vérifier ce serait la suivante:

function bs_animate_percentage(elem,style,unit,from,to,time) { 
    if(!elem) return; 

    console.log("first elem", elem); 
    var x = elem.cloneNode(true); 
    var start = new Date().getTime(), 
     timer = setInterval(function() { 
      console.log("second elem", x); 
      console.log("time", time); 
      var step = Math.min(1,(new Date().getTime()-start)/time); 
      elem.style[style] = (from+step*(to-from))+unit; 
      if(step == 1) clearInterval(timer); 
     },25); 
    elem.style[style] = from+unit; 
} 

Je suis sûr que ce sera très bien. Et cela confirmera votre problème. Et la prochaine serait de savoir comment le résoudre. Est-ce qu'un élément elem a dom ou un autre élément? Est-ce qu'il est modifié en chrome? Le meilleur moyen serait de donner à cet elem un identifiant et de le récupérer plus tard par l'id et de définir son style comme suit, juste seulement si vous ne voulez pas déboguer le problème dans votre code.

function bs_animate_percentage(elem,style,unit,from,to,time) { 
     if(!elem) return; 

     console.log("first elem", elem); 
     var x = elem.cloneNode(true).id; 
     var start = new Date().getTime(), 
      timer = setInterval(function() { 
       // Or some similar logic 
       x = document.getElementById(x); 
       console.log("second elem", x); 
       console.log("time", time); 
       var step = Math.min(1,(new Date().getTime()-start)/time); 
       elem.style[style] = (from+step*(to-from))+unit; 
       if(step == 1) clearInterval(timer); 
      },25); 
     elem.style[style] = from+unit; 
    }