Question

我有一个带计时器的页面。我想在每秒钟内在setInterval（）方法中的.each（）循环中更新它们以设置计时器的动画。一切正常，但时间表示不会更新。

closeBarButtonItem.addEventHandler({(sender, event) in
    self.dismissViewControllerAnimated(true, completion: nil)

}, forControlEvent: UIControlEventTouchUpInside)

$(document).ready(function() {
  setInterval(function() {
    $(".chronometer").each(function() {
      var time = parseInt($(this).find("#time").val()) + 1000;
      $(this).html(renderTime(time) + "<input type='hidden' id='time' value='" + time + "'>");
    })
  }, 1000);
});

function renderTime(start) {
  var now = moment().unix() * 1000;
  var duration = moment.duration(now - start).asMilliseconds();
  return humanize(duration);
}

function humanize(ms) {
  days = Math.floor(ms / (24 * 60 * 60 * 1000));
  daysms = ms % (24 * 60 * 60 * 1000);
  hours = Math.floor((daysms) / (60 * 60 * 1000));
  hoursms = ms % (60 * 60 * 1000);
  minutes = Math.floor((hoursms) / (60 * 1000));
  minutesms = ms % (60 * 1000);
  seconds = Math.floor((minutesms) / 1000);
  var rep = days + ":" + hours + ":" + minutes + ":" + seconds;
  return rep;
}

在调试模式下，我看到时间更新+ 1000，但<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='chronometer'> <input type='hidden' id='time' value='" + full.startDate + "'> </div>函数的结果只更新一次。对我来说奇怪的是，当我放置一些断点并完成所有步骤时它会更新，但如果我停止调试它不是，只是时间输入继续递增。

我确信这是一个根本性的错误，但我真的需要找到它的位置。

Answer 1

您似乎在混合来自不同脚本的代码，有代码可以增加隐藏字段的时间，还有代码来计算相对于开始时间的时间。

你只需要其中一个，所以我从开始时间注释了计算，因为没有设置开始时间。

你应该使用一个类而不是id作为隐藏字段，因为你应该计划在页面中有多个计时器（基于你正在循环它们）。使用重复的id：s似乎至少在某些浏览器中起作用，当你像你一样使用它时，但重复的id：s通常根本不能正常工作。

我现在将一个实际值放在隐藏字段中，而不是" + full.startDate + "，我猜这些值来自生成HTML代码的一些服务器代码。

$(document).ready(function() {
  setInterval(function() {
    $(".chronometer").each(function() {
      var time = parseInt($(this).find(".time").val()) + 1000;
      $(this).html(renderTime(time) + "<input type='hidden' class='time' value='" + time + "'>");
    })
  }, 1000);
});

function renderTime(time) {
  //var now = moment().unix() * 1000;
  //var duration = moment.duration(now - start).asMilliseconds();
  return humanize(time);
}

function humanize(ms) {
  days = Math.floor(ms / (24 * 60 * 60 * 1000));
  daysms = ms % (24 * 60 * 60 * 1000);
  hours = Math.floor((daysms) / (60 * 60 * 1000));
  hoursms = ms % (60 * 60 * 1000);
  minutes = Math.floor((hoursms) / (60 * 1000));
  minutesms = ms % (60 * 1000);
  seconds = Math.floor((minutesms) / 1000);
  var rep = days + ":" + hours + ":" + minutes + ":" + seconds;
  return rep;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='chronometer'>
  <input type='hidden' class='time' value='0'>
</div>
<div class='chronometer'>
  <input type='hidden' class='time' value='1000'>
</div>
<div class='chronometer'>
  <input type='hidden' class='time' value='2000'>
</div>

Answer 2

以下是工作示例。

$(document).ready(function () {
    setInterval(function () {
      var time = parseInt($("#time").val()) + 1000;
      $(".chronometer").html(renderTime(time));
      $("#time").val(time);
    }, 1000);
});

function renderTime(start) {
    var now = moment().unix();
    var duration = moment.duration(now - start).asMilliseconds();
    return humanize(duration);
}

function humanize(ms) {
    days = Math.floor(ms / (24 * 60 * 60 * 1000));
    daysms = ms % (24 * 60 * 60 * 1000);
    hours = Math.floor((daysms) / (60 * 60 * 1000));
    hoursms = ms % (60 * 60 * 1000);
    minutes = Math.floor((hoursms) / (60 * 1000));
    minutesms = ms % (60 * 1000);
    seconds = Math.floor((minutesms) / 1000);
    var rep = days + ":" + hours + ":" + minutes + ":" + seconds;
    return rep;
}

<script src="http://momentjs.com/downloads/moment.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='chronometer'></div>
<input type='hidden' id='time' value='0'>

Answer 3

如果需要，可以使用工作代码

setInterval(function() {
   $(".chronometer").each(function(){
      var time = parseInt($(this).children(".time").val()) + 1000;
      $(this).html(humanize(time) + "<input type='hidden' class='time' value='" + time + "'>");
   })}
, 1000 );
function calculatePastTime(start) {
var now = new Date().getTime();
var pastTime = now - start;
return pastTime;
}
function humanize(ms) {
days = Math.floor(ms / (24*60*60*1000));
daysms=ms % (24*60*60*1000);
hours = Math.floor((daysms)/(60*60*1000));
hoursms=ms % (60*60*1000);
minutes = Math.floor((hoursms)/(60*1000));
minutesms=ms%(60*1000);
seconds = Math.floor((minutesms)/1000);
var rep = days+":"+hours+":"+minutes+":" + seconds;
return rep;
}

和HTML：

<div class='chronometer'><input type='hidden' class='time' value='" + calculatePastTime(object.startDate) + "'></div>

一切都在时间戳中。

setInterval（）方法行为奇怪

3 个答案: