Livestamp.js 通过 jQuery 手动触发

Question

我正在使用一个名为 Livestamp.js (http://mattbradley.github.io/livestampjs/) 的自动 timeago 插件。好像是配合moment.js自动转换这个：

对此：

8 minutes ago

在每个时间间隔。

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

我试过这样做

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

但它不起作用。 确实是立即转换，但是"a few seconds ago"，而实际上是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 代码将负责保持时间参考最新。

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

Livestamp.js 通过 jQuery 手动触发

Livestamp.js trigger manually via jQuery

jquery

timeago

livestamp.js