Question

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

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

});

工作片段：

＆＃13;

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

＆＃13;

<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">

＆＃13;

Answer 1

问题是，每次单击按钮时，您都会开始新的间隔。您可以在开始新的之前clear the previous interval或开始一次间隔并更新列表。

以下是清除间隔的示例：

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毫秒（1毫秒）的时间间隔而闪烁。将其更改为30000以查看差异。

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

jQuery函数无法正常工作

2 个答案: