jQuery函数无法正常工作

Posted 2023-04-13

【中文标题】jQuery函数无法正常工作

【英文标题】：jQuery function not working properly

【发布时间】：2016-06-06 16:38:31

【问题描述】：

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

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

);

工作sn-p：

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

【参考方案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;
;

【讨论】：

为什么？实际上，您只需在代码中添加两行。

它解决了闪烁问题，但它使前几天变为 16958 天前，这是不正确的。都有相同的微时间值 1462883724000 所以结果应该是一样的

@Auj 那是因为您使用$(this).html() 来获取间隔时间。因此，第一个计时器之后的每个计时器都使用27 而不是1462883724000。

@Auj 您可以将该信息存储在像data-start-time="1462883724000" 这样的数据属性中，然后使用$(this).attr('data-start-time') 而不是使用$(this).html() 访问它。

是的，谢谢我已经修复了它，如果您只是添加 data-id 属性并为其赋值。它修复了所有内容，无需对原始功能进行任何编辑。因此，只需添加您描述的 data-id 或属性就不需要其他任何东西了。干杯。

【参考方案2】：

因为 1000 毫秒 (1ms) 的时间间隔而闪烁。请尝试将其更改为 30000 以查看差异。

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

【讨论】：

它被添加到 1000 毫秒，所以它像这样 1 秒前 2 秒前 3 秒前 59 秒前，然后是几分钟、几小时和几天。

你尝试改变window.setTimeinterval(update,30000)..interveral codepen URL -codepen.io/nagasai/pen/oLjbvb

它解决了闪烁问题，但它使前几天变为 16958 天前，这是不正确的。都有相同的微时间值 1462883724000 所以结果应该是一样的

您能否分享每次点击的预期结果，即第一次点击 27 天前，第二次点击 - 1462883724000 天前？？

尝试在times函数之外使用this.html()并将其分配给变量并尝试它.. $.fn.UpdateSince = function(interval) x = $(this).html(); var times = this.map(function() return e: $(this), t: x ; );相同的 codepen url -codepen.io/nagasai/pen/oLjbvb 供参考