使用jQuery获取照片提要中唯一值的时差

我正在使用一个动态的feed，它将最近上传的照片与发布时间戳一起拉入。当前时间戳以毫秒为单位。我有一个脚本，它从当前时间的整数值中减去发布的时间戳值。然后将重新标记整数值格式化为时间字符串。最终生成一个字符串“…在x分钟前发布”（其中x是时间差）。见下文：

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");

函数到秒（时间）{
//提取小时、分钟和秒
var parts=时间分割（':'）；
退货零件[0]*3600+
第[1]*60部分+
+
第[2]部分；//秒
}
//获取当前历元值并转换为时间字符串
var d=新日期（）；
var currentEpoch=（d.getTime（）-d.getMillimes（））/1000；
var currentTime=新日期（currentEpoch*1000）；
var currentDate=currentTime.toLocaleTimeString（{hour12:false}）；
//获取POST的历元值并将其转换为时间字符串
var postEpoch=$（“.timestamp”）.html（）；
var postTime=新日期（后纪元*1000）；
var postDate=postTime.toLocaleTimeString（{hour12:false}）；
//有区别吗
var差=Math.abs（toSeconds（currentDate）-toSeconds（postDate））；
//格式化差异
var结果=[
数学地板（差/3600）
数学地板（（差值%3600）/60）
];
结果=结果映射（函数（v）{
返回v<10？'0'+v:v；
})。加入（“：”）；
//将差异注入时间戳DIV
$（“.timestamp”）.html（“已发布”+结果+“分钟前”）；

每个图像都包含在自己的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>

1385537546
1385536903
1385537273

---

我的脚本似乎工作正常，但问题是此功能仅在第一个timestamp div上工作。因此第一个图像将具有正确的时间值，但其余图像继承相同的精确值，而不是获得它们自己的唯一值。我意识到解决办法可能是在某处插入一个（这个），但我被难住了

据我从插件中了解，您可以这样做：
1.使用

mock（true/false）-在不将图像插入DOM的情况下获取数据。使用 成功回调。

及

成功（函数）-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();

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的讨论和一项小型研究，我发现您应该了解更多，因为它可能会因用户PC上的浏览器和区域设置而引起问题。

您将时间戳应用于类“$（“.timestamp”）”，因此您将其应用于包含该类的所有div。此函数何时启动？在页面加载或某些事件上？可能是由于相同的类名，请尝试使用uniqueid@Maksym-还将动态添加“.timestamp”div。每个图像都以我发布的HTML格式被拉入。脚本在第页被调用load@Bharath-我不能给每个div一个唯一的ID。timestamp div通过image@NickJ，你能显示加载图片的功能吗？嘿，伙计们，谢谢你们的更新！这看起来真不错。只有几个问题。我在看小提琴，我看到Instafeed功能有两个添加选项的地方。例如，“mock”在一处设置为false，在另一处设置为true。此外，它设置为按最近发布的内容进行排序，但发布的时间看起来很分散。除此之外，我喜欢这个！