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'));
});

但它不起作用。 确实立即转换，但“几秒钟前”，而实际上是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手动触发

1 个答案: