Livestamp.js通过jQuery手动触发

Question

我正在使用名为Livestamp.js的自动Timeago插件之一（http://mattbradley.github.io/livestampjs/）。这似乎与moment.js自动转换这一合作：

<span data-livestamp="1488615741"></span>

这样：

<span>8 minutes ago</span>

在每个时间间隔

。

但我不喜欢那样，因为在最终自动转换<span>之前的几毫秒内就可以观察到小故障。正因为如此，我想通过jQuery手动完成，所以如果我做了.append()，我希望<span>立即转换。

我试图做到这一点

$('div').append(data).promise().done(function() { 
    $(this).find('span[data-livestamp]').livestamp($(this).data('livestamp')); 
}); 

但它不能正常工作。 <span>确实立即转换，但“几秒前”，而实际上是6天前。

如何做到这一点？

更新将代码更改为更易于理解。

Answer 1

在$(this).data('livestamp')，$(this)指的是错误的对象。相反，使用.each迭代实时邮票。里面.each(function() {...})，this将参考Livestamp跨度：

$('div').append(data).promise().done(function() { 
    $(this).find('span[data-livestamp]').each(function() { 
     $(this).livestamp($(this).data('livestamp')); 
    }); 
}); 

---

以前的答案（不相关，因为注释显示）：

如果有延误，jQuery将有代码应用之前的类似延迟。

所有客户端JavaScript都以这种方式工作：JavaScript嵌入到页面中，因此，浏览器首先加载页面，然后加载并在该页面上运行JavaScript。在JavaScript运行之前，您会注意到事物的旧状态。

相反，以避免延迟，通过你的服务器端语言提供的默认值，所以这个HTML供应：

<span data-livestamp="1488615741">8 minutes ago</span> 

当然，你不能只写“8分钟前” ，您需要使用像PHP这样的服务器端语言来生成预定义的值。例如，如果在PHP中生成您的网页，你的变量命名为$time，并且使用的是php-time-ago，你可以写：

<?php $timeAgo = new Westsworld\TimeAgo(); ?> 
<span data-livestamp="<?= $time; ?>"><?= $timeAgo->inWords('@' . $time); ?></span> 

这样，PHP生成的文本将被显示在Livestamp开始工作之前， ，并且JavaScript代码将负责保持时间参考是最新的。

当然，您可能会使用不同的服务器端语言，不同的变量名称和不同的库，这只是一个示例。