递归函数只触发一次答案

【问题标题】：Recursive function only firing once递归函数只触发一次
【发布时间】：2017-01-27 06:44:00
【问题描述】：

在下面的函数中，我不明白为什么计数器函数只触发一次（数字上升一个增量，我希望它计数到 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。

非常感谢您的帮助。

【问题讨论】：

返回后需要分号...
@ccpgh 不，不是：自动分号插入
你确定条件的第二个分支正在被占用吗？
嗯...这个函数会产生什么效果？如果满足某个条件，则调用 counterOne 并超时。但无论是否满足该条件（因为设置了超时后您没有返回该函数），请调用 counterOne。您确定在调用 counterOne-with-timeout 调用的条件调用之后不想要 return 语句，以便每次都不会在函数底部调用 counterOne？

标签： javascript recursion

【解决方案1】：

toFixed() 的返回值为

使用定点表示法表示给定数字的字符串。

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

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

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

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

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

【讨论】：

修复了它。非常感谢您的帮助和解释@JohannesMerz

【解决方案2】：

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

所以它基本上是这样做的：

第一次调用：值为 15.99 23.99（两个数字）
第二次调用：值为“16.00”23.99（字符串和数字）

由于没有为字符串定义 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();
}

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

【讨论】：