Rekursive Funktion nur einmal feuern

Question

In der folgenden Funktion verstehe ich nicht, warum die Zählerfunktion nur einmal ausgelöst wird (die Zahl steigt um ein einzelnes Inkrement, ich möchte es bis homeFigTwo zählen).

function effectFour() { 
    var homeFigOne = parseFloat($('.home .figure').text()); 
    var homeFigTwo = 23.99; 
    var plusFigOne = parseFloat($('.home-plus .figure').text()); 
    var plusFigTwo = 28.49; 
    var homeInc = homeFigOne < homeFigTwo ? .01 : -.01; 
    var plusInc = plusFigOne < plusFigTwo ? .01 : -.01; 

    function counterOne(){ 
    if (homeFigOne === homeFigTwo){ 
     return 
    }else{ 
     homeFigOne = (homeFigOne + homeInc).toFixed(2); 
     $('.home .figure').text(homeFigOne); 
     window.setTimeout(counterOne, 100); 
    } 
    } 
    counterOne(); 
} 

Dies kann im Kontext hier gesehen werden: http://codepen.io/timsig/pen/NdvBKN.

Vielen Dank für jede Hilfe.

Answer 1

toFixed() hat einen Rückgabewert von

ein String, der die gegebene Nummer mit Festkommaschreibweise.

Dies bedeutet, dass auf das zweite Mal, dass dies geschieht:

homeFigOne = (homeFigOne + homeInc).toFixed(2); 

Was wirklich los ist: "16.00" = "16.00" + 0.01, die in der Tat nicht besitzt eine toFixed Methode, wie der ganze Satz, was ist.

Also was Sie wollen, ist das Ergebnis von homeFigOne wieder, denn wann immer Sie toFixed es setzen Sie es wieder auf eine Zeichenfolge.

homeFigOne = (parseFloat(homeFigOne) + homeInc).toFixed(2)

Answer 2

Ihre Rekursion funktioniert wie erwartet, aber bei Ihrem zweiten Aufruf wird ein Fehler ausgelöst. Dies liegt daran, dass Sie homeFigOne in einen String konvertieren, indem Sie toFixed verwenden.

So macht es im Grunde diese:

• ersten Aufruf: Werte sind 15.99 23.99 (beide Zahlen)
• zweiten Anruf: Werte sind "16.00" 23.99 (a String und eine Zahl)

Da die Methode toFixed nicht für Strings definiert ist, wird eine Ausnahme ausgelöst. Da dies async in einer anonymen Funktion passiert, prob. nicht bemerkt.

So ist mein Vorschlag, zunächst die Schrittweite zu machen, und nur für Ihre HTML-Element gegossen:

function effectFour() { 
    var homeFigOne = parseFloat($('.home .figure').text()); 
    var homeFigTwo = 23.99; 
    var plusFigOne = parseFloat($('.home-plus .figure').text()); 
    var plusFigTwo = 28.49; 
    var homeInc = homeFigOne < homeFigTwo ? .01 : -.01; 
    var plusInc = plusFigOne < plusFigTwo ? .01 : -.01; 

    function counterOne(){ 
    if (homeFigOne === homeFigTwo){ 
     return 
    }else{ 
     homeFigOne = homeFigOne + homeInc; 
     $('.home .figure').text(homeFigOne.toFixed(2)); 
     window.setTimeout(counterOne, 100); 
    } 
    } 
    counterOne(); 
} 

edit: +, wie Sie mit Schwimmern zu tun sind Sie besser mit> = statt == = für Ende criterium