Livestamp.js jQuery를 통해 수동으로 트리거

Question

나는 Livestamp.js (http://mattbradley.github.io/livestampjs/)라는 자동 timeago 플러그인 중 하나를 사용하고 있습니다. 이것에

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

:이 작업을 자동으로 변환하는 moment.js와 협력하는 것마다 시간 간격

<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를로드하고 실행합니다. 자바 스크립트가 실행되기 전에 이전 상태를 알 수 있습니다. 이 HTML이 제공되도록

대신, 지연을 방지하기 위해, 서버 측 언어를 통해 기본 값을 제공 :

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

물론, 당신은 단지 '분 전'쓸 수 없습니다 PHP와 같은 서버 측 언어를 사용하여 미리 정의 된 값을 생성해야합니다. 페이지가 PHP에서 생성되는 경우 예를 들어, 당신의 변수가 $time라는, 당신은 php-time-ago를 사용하고, 당신은 쓸 수 :

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

이 방법은 PHP - 생성 된 텍스트가 표시됩니다 Livestamp이 작업을 시작하기 전에 JavaScript 코드는 시간 참조를 최신 상태로 유지 관리합니다.

물론 다른 서버 측 언어, 다양한 변수 이름 및 다른 라이브러리를 사용하게 될 것입니다. 이는 단지 예일뿐입니다.