避免无限循环

Question

我是新手，请原谅我的无知。我试图通过本地存储获取一个计时器来告诉用户他们上次访问该页面的时间。但我却做了一个无限循环，我该如何纠正这个问题？在函数外调用函数？这会是什么样子？

$(document).ready(function(){
    var myDate = new Date(2015,4,9,0,0);
    localStorage["mydate"] = JSON.stringify(myDate);

    startTimer();
});

function startTimer() {
    setInterval(function(){
    var text = "It's been " + hoursSinceFirstVisit() + " hours since you first visited.";
    $('#timer').text(text);
 }, 1000);
}

function hoursSinceFirstVisit() {
    var currentDate = new Date();
    var lastDate = new Date(JSON.parse(localStorage["mydate"]));
    return hoursBetweenDates( lastDate, currentDate);
}
<div id="timer"></div>

谢谢！

Answer 1

没有提供hoursBetweenDates功能，所以我添加了一个。要调试递归错误，请尝试将匿名函数移动到重复调用的命名函数。将代码分解成更小的部分，并确保没有部分重复调用自身：

$(document).ready(function() {
  var myDate = new Date(2015, 4, 9, 0, 0);
  localStorage.mydate = JSON.stringify(myDate);

  function startTimer() {
    setInterval(updateMessage, 100);
  }

  function updateMessage() {
    var text = "It's been " + hoursSinceFirstVisit() + " hours since you first visited.";
    $('#timer').text(text);
  }

  // This is my function for getting hours between dates
  function hoursBetweenDates(d1, d2) {
    return Math.abs(d1 - d2) / 36e5;

    // For integer hours use this function
    // return Math.floor(Math.abs(d1 - d2) / 36e5);
  }

  function hoursSinceFirstVisit() {
    var currentDate = new Date();
    var lastDate = new Date(JSON.parse(localStorage.mydate));
    return hoursBetweenDates(lastDate, currentDate);
  }

  startTimer();
});

这可以正常工作而不会出现递归错误。这是demo。请注意，我让它返回自上次访问以来的小数精度小时，并将间隔设置为 100 毫秒以证明它工作正常。根据需要更新您的版本。抱歉，由于本地存储被禁用，我无法制作 Stack Snippet。

演示：http://jsbin.com/demevi/3/

Answer 2

函数setInterval() 安排一个函数重复执行，在每次运行前等待指定的毫秒数。

如果你想延迟函数hoursSinceFirstVisit()的执行（并且只运行一次）那么你必须使用setTimeout()：

function startTimer() {
    setTimeout(function() {
       var text = "It's been " + hoursSinceFirstVisit() + " hours since you first visited.";
       $('#timer').text(text);
    }, 1000);
}