JavaScript: Erreur - variable déjà définie? Pourquoi?

Question

J'utilise l'outil génial JSLint pour m'assurer que mon JavaScript est "strict".

Quand je l'utilise cependant, je reçois les erreurs suivantes:

'hexRed', 'hexGreen', 'hexBlue', 'color' are already defined (referring to the "else if" clause) 

Mon code est ci-dessous. Des idées comment réparer mon code pour le rendre JavaScript "strict"?

function fade(currentStep, numSteps, currentRed, currentGreen, currentBlue, deltaRed, deltaGreen, deltaBlue) { 

    if (currentStep < numSteps) { 
     var hexRed = zeroPad(currentRed.toString(16), 2); 
     var hexGreen = zeroPad(currentGreen.toString(16), 2); 
     var hexBlue = zeroPad(currentBlue.toString(16), 2); 
     var color = "#" + hexRed + hexGreen + hexBlue; 

     document.getElementById('abc').style.backgroundColor = color; 

     currentRed += deltaRed; 
     currentGreen += deltaGreen; 
     currentBlue += deltaBlue; 

     timerID = setTimeout("fade(currentStep, numSteps, currentRed, currentGreen, currentBlue, deltaRed, deltaGreen, deltaBlue)", 70); 

    } else if (currentStep == numSteps) { 

     var hexRed = endingRed.toString(16); // <-- JSLint flags this line 
     var hexGreen = endingGreen.toString(16); // <-- JSLint flags this line 
     var hexBlue = endingBlue.toString(16); // <-- JSLint flags this line 
     var color = "#" + hexRed + hexGreen + hexBlue; // <-- JSLint flags this line 

     document.getElementById('abc').style.background = color; 
    } 
} 

Answer 1

Déclarez vos variables en haut de la fonction une fois:

function fade(...) { 
    var hexRed, hexGreen, hexBlue, color; 
    ... 

Answer 2

mis var hexRed, hexGreen, hexBlue, color
comme la première ligne de votre fonction, avant la if
supprimer toutes les autres var déclarations

Answer 3

JavaScript étend les variables à la fonction dans laquelle elles se trouvent, et non au bloc entre {et}.

Par exemple:

function test(){ 
    var i=0; 
    if (i > 5) { 
     var x = i + 1; 
     alert(x); 
    } 
} 

signifie réellement:

function test(){ 
    var i, x; 
    i = 0; 
    if (i > 5) { 
     x = i + 1; 
     alert(x); 
    } 
} 

Vous pouvez penser est que toutes les variables réellement créées avec « var » en haut de la fonction, mais initialisé à un valeur où vous l'attribuez d'abord. Pour résoudre vos problèmes, il suffit de rendre cela explicite en déclarant les variables en haut de votre fonction, comme je l'ai fait dans le deuxième extrait de code ci-dessus.

Answer 4

La portée Javascript ne fonctionne pas comme les autres langages c-style. Il existe seulement quelques niveaux d'étendue possibles: global, function, with, et peut-être un autre impair ou deux. l'instruction if ne crée pas une nouvelle étendue. Ce que vous faites est effectivement

function fade(currentStep, numSteps, currentRed, currentGreen, currentBlue, deltaRed, deltaGreen, deltaBlue) { 

    var hexRed; 
    var hexGreen; 
    var hexBlue; 
    var color; 
    var hexRed; 
    var hexGreen; 
    var hexBlue; 
    var color; 


    if (currentStep < numSteps) { 
     hexRed = zeroPad(currentRed.toString(16), 2); 
     hexGreen = zeroPad(currentGreen.toString(16), 2); 
     hexBlue = zeroPad(currentBlue.toString(16), 2); 
     color = "#" + hexRed + hexGreen + hexBlue; 

     document.getElementById('abc').style.backgroundColor = color; 

     currentRed += deltaRed; 
     currentGreen += deltaGreen; 
     currentBlue += deltaBlue; 

     timerID = setTimeout("fade(currentStep, numSteps, currentRed, currentGreen, currentBlue, deltaRed, deltaGreen, deltaBlue)", 70); 

    } else if (currentStep == numSteps) { 

     hexRed = endingRed.toString(16); // <-- JSLint flags this line 
     hexGreen = endingGreen.toString(16); // <-- JSLint flags this line 
     hexBlue = endingBlue.toString(16); // <-- JSLint flags this line 
     color = "#" + hexRed + hexGreen + hexBlue; // <-- JSLint flags this line 

     document.getElementById('abc').style.background = color; 
    } 
} 

C'est pourquoi jslint se plaint, bien que votre script devrait toujours fonctionner. Ce processus où la déclaration de variable est placée dans la bonne portée indépendamment de l'endroit où l'instruction existe est appelée "levage".