Question

i’d like to periodically update the time on comments that get posted on my website. The format I’m interested in as Facebook and others have done where the time of the post is listed in relation to the current time. For example, the post should say, “just now…” when first submitted but then after 1 minute it should say “1 minute ago”, then “2 minutes ago” and so on.

I found this nice script to do this: http://forrst.com/posts/Facebook_style_live_dates_in_JavaScript-hro
and have gotten myself maybe half way there.

There are two issues with my code so far:

1. the time that is being reported is screwed up.
2. the time is not being updated every second even though the setinterval() is working fine.

here is a snippet of the code which I put in its entirety in a jsfiddle: http://jsfiddle.net/Y8Q7p/16/. I think the issue is with var time.

$(document.body).on('click', 'button', function(){
var id= $(this).data('id'),
comment=$('textarea[data-id="'+id+'"]').val(),
start_timer = setInterval(function() { 
    var time =  new Date();
    time = time_since(time);

    $('div[data-id="'+id+'"]').html(time);

    }, 
    1000);
    $('#'+id).html(comment); 
});

Answer 1

I’ve tested it, and this works:

$(document.body).on('click', 'button', function(){
    var id= $(this).data('id'),
    comment=$('textarea[data-id="'+id+'"]').val();
    var time =  new Date();
    start_timer = setInterval(function() {

        //var time =  new Date();
        var time2 = time_since(time.getTime()/1000);

        $('div[data-id="'+id+'"]').html(time2);

        },
        1000);
        $('#'+id).html(comment);
});


/**
 * date_suffix()
 * returns the date suffix (st,nd,rd,th) for a given day in a month
 *
 * @author: Andy Thomas ([e-mail])
 * @date: 27/09/2010
 */

function date_suffix(date) {
        if (date == 1 ||  date == 21 || date == 31) {
                return 'st';
        } else if (date == 2 || date == 22) {
                return 'nd';
        } else if (date == 3 || date == 23) {
                return 'rd';
        } else {
                return 'th';
        }
}

/**
 * time_since()
 * returns the time passed since a given unix_timestamp.
 * eg. 10 seconds ago, 1 hour ago, 10th Sep etc
 *
 * @author: Andy Thomas ([e-mail])
 * @date: 27/09/2010
 */
function time_since(original) {
        original = new Date(original * 1000);

        var str = '';

        var months = [
                'Jan',
                'Feb',
                'Mar',
                'Apr',
                'May',
                'Jun',
                'Jul',
                'Aug',
                'Sep',
                'Oct',
                'Nov',
                'Dec'
        ];

        var chunks = [
                [31536000000, 'year'],
                [2592000000, 'month'],
                [604800000, 'week'],
                [86400000, 'day'],
                [3600000, 'hour'],
                [60000, 'minute'],
                [1000, 'second'],
        ];

        var today = new Date();
        var since = new Date(today.getTime() - original.getTime());

        if (since.getTime() > 604800000) {
                str = months[original.getMonth()] + ' ' + original.getDate() + date_suffix(original.getDate());

                if (since.getTime() > 31536000000) {
                        str = str + ', ' + original.getFullYear();
                }

                return str;
        }

        var ms = 0;
        var name = 0;
        var i = 0;
        var ic = chunks.length;
        var count = 0;

        for (i=0;i<ic;i++) {
                ms = chunks[i][0];
                name = chunks[i][1];

                count = Math.floor(since.getTime() / ms);

                if (count != 0) {
                        break;
                }
        }

        return count + ' ' + name + ((count == 1) ? '' : 's') + ' ago';
}