Получение разницы во времени для уникальных значений в ленте фотографий с помощью jQuery

Я работаю с динамической лентой, которая загружает недавно загруженные фотографии вместе с меткой времени, когда они были опубликованы. В настоящее время метка времени находится в миллисекундах. У меня есть скрипт, который вычитает опубликованное значение метки времени из целого значения текущего времени. Затем он форматирует оставшееся целочисленное значение в строку времени. В конечном счете производя строку "...отправлено x минут назад " (где x-разница во времени). Смотрите JS ниже: 

function toSeconds(time_str) {
    // Extract hours, minutes and seconds
    var parts = time_str.split(':');
    return parts[0] * 3600 +
    parts[1] * 60 +
    +
    parts[2]; // seconds
}

//GETS CURRENT EPOCH VALUE & CONVERTS TO TIME STRING
var d = new Date(); 
var currentEpoch = (d.getTime()-d.getMilliseconds())/1000;
var currentTime = new Date(currentEpoch *1000);
var currentDate = currentTime.toLocaleTimeString({hour12: false});

//GETS EPOCH VALUE OF POST & CONVERTS TO TIME STRING
var postEpoch = $(".timestamp").html();
var postTime = new Date(postEpoch *1000);
var postDate = postTime.toLocaleTimeString({hour12: false});

//GETS THE DIFFERENCE
var difference = Math.abs(toSeconds(currentDate) - toSeconds(postDate));

//FORMAT THE DIFFERENCE
var result = [
Math.floor(difference / 3600)
Math.floor((difference % 3600) / 60)
];

result = result.map(function(v) {
return v < 10 ? '0' + v : v;
}).join(':');


//INJECT DIFFERENCE INTO TIMESTAMP DIV
$(".timestamp").html("posted" + result + " minutes ago");

Каждый образ содержится в своем собственный div вместе с вложенным div для каждой метки времени. Смотрите пример HTML: 

<div class="imgContainer">
    <img>
    <div class="timestamp">1385537546</div>
</div>

<div class="imgContainer">
    <img>
    <div class="timestamp">1385536903</div>
</div>

<div class="imgContainer">
    <img>
    <div class="timestamp">1385537273</div>
</div>

Мой скрипт, кажется, работает правильно, но проблема в том, что эта функциональность работает только на самой первой временной метке div. Таким образом, первое изображение будет иметь правильное значение времени, но остальные изображения наследуют то же самое точное значение вместо того, чтобы получить свое собственное уникальное значение. Я понимаю, что решение может быть брошено в (это) где-то, но я в тупике.

1 2
html jquery timestamp converter

1 ответ:

Как я понял из плагина, вы можете сделать это:
1. Использовать

Mock (true / false) - извлечение данных без вставки изображений в DOM. Воспользуйся с успехом обратный звонок.

И

Success (function) - функция обратного вызова, вызываемая при возврате Instagram достоверные данные. Принимает данные JSON в качестве аргумента объекта.

Таким образом, в основном я переопределил рендеринг по умолчанию для каждого изображения и вставил вместо него пользовательский элемент.

Вы можете читать подробнее об этом здесь


Javascript 

var feed = new Instafeed({
    pages: 1,
    limit: 5,
    get: 'tagged',
    tagName: 'thetypein',
    clientId: '467ede5a6b9b48ae8e03f4e2582aeeb3',
    mock: true,
    success: function (json) {
        for (var i = 0; i < json.data.length; i++) {
            var cont = $("<div>")
                .addClass("imgContainer")
                .appendTo($("#instafeed"));
            var img = $("<img>")
                .attr("src", json.data[i].images.thumbnail.url)
                .appendTo(cont);
            var time = $("<div>")
                .addClass("timestamp")
                .attr("id", "Time_" + (i + 1))
                .text("Added " + CountTime(json.data[i].created_time)+" minutes ago")
                .appendTo(cont);
            }
        }
    });
feed.run();

Также я изменил вашу функцию, чтобы использовать ее должным образом и исправил вашу функцию toSeconds :
Javascript 

function CountTime(posttime) {
    function toSeconds(time_str) {
    // Extract hours, minutes and seconds
        time_str= time_str.replace("AM","").replace("PM",""); // added to get rid of "AM" and "PM" 
    var parts = time_str.split(':');
    return parts[0] * 3600 +
    parts[1] * 60 +
    +
    parts[2]; // seconds

}
    var d = new Date(); 
var currentEpoch = (d.getTime()-d.getMilliseconds())/1000;
var currentTime = new Date(currentEpoch *1000);
var currentDate = currentTime.toLocaleTimeString({hour12: false});
    console.log(currentDate);
var postEpoch = posttime;
var postTime = new Date(postEpoch *1000);
var postDate = postTime.toLocaleTimeString({hour12: false});
    console.log(postDate);

    var difference = Math.abs(toSeconds(currentDate) - toSeconds(postDate));
    console.log(toSeconds(postDate));
    var result = [
Math.floor(difference / 3600),
Math.floor((difference % 3600) / 60)
];

    result = result.map(function(v) {
return v < 10 ? '0' + v : v;
}).join(':');
    return result;
};

Вот пример Скрипка

Обновление 1

После обсуждения с Bharath Rallapalli и небольшого исследования я выяснил, что вы должны прочитать больше о toLocaleTimeString () , потому что это может насторожить в зависимости от браузера и настройки культуры на ПК пользователя и вызывают проблемы.

0