递归函数仅触发一次

Question

在下面的函数中，我不明白为什么计数器功能仅触发一次（数字上升一个增量，我希望它计数到homeFigTwo）。

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();
}

这可以在上下文中看到： http : //codepen.io/timsig/pen/NdvBKN 。

非常感谢您的帮助。

Answer 1

toFixed()的返回值为

一个使用定点符号表示给定数字的字符串。

这意味着第二次发生这种情况：

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

真正发生的是： "16.00" = "16.00" + 0.01 ，实际上，它不具有toFixed方法，因为整个句子就是这样。

所以，你想要的是parseFloat再次homeFigOne的结果，因为每当你toFixed它，你再次设置为一个字符串。

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

Answer 2

您的递归按预期方式工作，但是在第二次调用时会引发错误。 这是因为您使用toFixed将homeFigOne转换为字符串。

因此，它基本上是这样做的：

• 首次致电：值是15.99 23.99（两个数字）
• 第二次调用：值是“ 16.00” 23.99（一个字符串和一个数字）

由于未为String定义toFixed方法，因此会引发异常。 当这种情况在匿名函数中异步发生时，您就很有可能了。 没注意到。

因此，我的建议是先进行增量，然后仅对html元素进行强制转换：

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();
}

编辑：+当您处理浮点数时，对于最终标准，最好使用> =而不是===