Livestamp.js auslösen manuell über jQuery

Question

Ich verwende eines der automatischen Timeago-Plugin namens Livestamp.js (http://mattbradley.github.io/livestampjs/). Es scheint mit moment.js zusammenarbeiten, um dies automatisch zu konvertieren:

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

dazu:

<span>8 minutes ago</span>

in jedem Zeitintervall.

Aber ich mag das nicht, weil der Glitch in wenigen Millisekunden beobachtet werden wird, bevor die <span> schließlich automatisch konvertiert wird. Aus diesem Grund möchte ich es manuell über jQuery tun, also wenn ich .append() getan habe, möchte ich die <span> sofort konvertiert werden.

habe ich versucht, diese

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

Aber es nicht zu tun. Die <span> wird zwar sofort konvertiert, aber "vor ein paar Sekunden", während es eigentlich schon 6 Tage her ist.

Wie wird das erreicht?

Update änderte den Code, um einfacher zu verstehen.

Answer 1

In $(this).data('livestamp') bezieht sich $(this) auf ein falsches Objekt. Stattdessen iterieren Sie über die Livestamps mit .each. Innerhalb .each(function() {...}) würde this auf die Livestamp Spanne verweisen:

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

---

Zurück Antwort (nicht relevant, da die Kommentare gezeigt haben):

Wenn Sie eine Verzögerung haben, wird die jQuery haben eine ähnliche Verzögerung, bevor der Code angewendet wird.

Alles clientseitige JavaScript funktioniert so: Das JavaScript wird in die Seite eingebettet, also lädt der Browser zuerst die Seite, dann wird das JavaScript geladen und auf dieser Seite ausgeführt. Bevor das JavaScript ausgeführt wird, werden Sie den alten Zustand der Dinge bemerken.

Stattdessen die Verzögerung zu vermeiden, bieten die Standardwerte über Ihre serverseitige Sprache, so dass diese HTML serviert:

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

Natürlich können Sie nicht nur "vor 8 Minuten schreiben , müssen Sie eine serverseitige Sprache wie PHP verwenden, um einen vordefinierten Wert zu generieren. Zum Beispiel, wenn Ihre Seite in PHP erzeugt wird, wird Ihre Variable $time genannt, und Sie verwenden php-time-ago, könnten Sie schreiben:

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

Auf diese Weise, der PHP-generierten Text angezeigt wird, bevor die Livestamp beginnt zu arbeiten und der JavaScript-Code wird dafür sorgen, dass die Zeitreferenz auf dem neuesten Stand bleibt.

Natürlich werden Sie wahrscheinlich eine andere serverseitige Sprache, verschiedene Variablennamen und verschiedene Bibliotheken verwenden, dies ist nur ein Beispiel.