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

避免无限循环

2 个答案: