j查询功能无法正常工作

Question

>我有一个从互联网上复制的函数。它在加载时工作正常，但是当我使用 prepend（） spans 添加元素时，函数已经开始闪烁，我已将其添加到 jsfiddle 请看一下任何帮助将不胜感激。

$('.b').click(function(){
     $('.top').prepend('<div class="inner">brown fox jumps <span class="sinc"> 1462883724000 </span> </div>');
     $('.sinc').UpdateSince(1000);
});

工作片段：

$.fn.UpdateSince = function(interval) {
  var times = this.map(function() {
    return {
      e: $(this),
      t: parseInt($(this).html())
    };
  });
  var format = function(t) {
    if (t > 86400) {
      return Math.floor(t / 86400) + ' days ago';
    } else if (t > 3600) {
      return Math.floor(t / 3600) + ' hours ago';
    } else if (t > 60) {
      return Math.floor(t / 60) + ' minutes ago';
    } else {
      return t + ' seconds ago';
    }
  }
  var update = function() {
    var now = new Date().getTime();
    $.each(times, function(i, o) {
      o.e.html(format(Math.round((now - o.t) / 1000)));
    });
  };
  window.setInterval(update, interval);
  update();
  return this;
}
$('.sinc').UpdateSince(1000);
$('.b').click(function() {
  $('.top').prepend('<div class="inner">brown fox jumps <span class="sinc"> 1462883724000 </span> </div>');
  $('.sinc').UpdateSince(1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="top">
  <div class="inner">
    brown fox jumps
    <span class="sinc">1462883724000</span>
  </div>
</div>
<input type="button" class="b" value="click me">

Answer 1

问题是每次单击按钮时都会开始一个新的间隔。您可以在开始新间隔之前清除上一个间隔，也可以启动间隔一次并更新列表。

下面是清除间隔的示例：

var updateInterval; // Store the interval ID here
$.fn.UpdateSince = function(interval) {
  ...
  // Clear the previous interval
  clearInterval(updateInterval);
  updateInterval = setInterval(update, interval);
  update();
  return this;
};

Answer 2

由于 1000 毫秒 （1ms） 的时间间隔，它正在闪烁。TRy 将其更改为 30000 以查看差异。

        $('.sinc').UpdateSince(30000);