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代碼將負責保持時間參考是最新的。

當然，您可能會使用不同的服務器端語言，不同的變量名稱和不同的庫，這只是一個示例。