jquery - Setting time passed since last message sent / recieved -

my chat script far:

initchat: function () {      var cont = $('#chats');     var list = $('.chats', cont);     var form = $('.chat-form', cont);     var input = $('input', form);     var btn = $('.btn', form);      $('.scroller', cont).slimscroll({         scrollto: list.height()     });      var handleclick = function (e) {         e.preventdefault();          var text = input.val();         if (text.length == 0) {             return;         }          var contains = text.match(/(@tim marshall:|@mark smyth:)/i) === null ? "left" : "right";             sender;          if(contains === 'right'){             var sender = 'private message from: <a href="#" class="name">bob nilson</a>&nbsp;<br />';         }else{             var sender = '<a href="#" class="name">bob nilson</a>&nbsp;';         };          var time = new date();         var time_str = time.tostring('mmm dd, yyyy hh:mm:ss');         var tpl = '';         tpl += '<li class="' + contains + '">';         tpl += '<img class="avatar" alt="" src="../../assets/admin/layout/img/avatar1.jpg"/>';         tpl += '<div class="message">';         tpl += '<span class="arrow"></span>';         tpl += sender;         tpl += '<span class="datetime">at ' + time_str + '</span>';         tpl += '<span class="body">';         tpl += text.tostring().replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/'/g, "&#39;").replace(/"/g, "&#34;");         tpl += '</span>';         tpl += '</div>';         tpl += '</li>';          var msg = list.append(tpl);         input.val("");         $('.scroller', cont).slimscroll({             scrollto: list.height()         });     }      /*     $('.scroller', cont).slimscroll({         scrollto: list.height()     });     */      $('body').on('click', '.message .name', function (e) {         e.preventdefault(); // prevent click event          var name = $(this).text(); // clicked user's full name         input.val('@' + name + ':'); // set input field         metronic.scrollto(input); // scroll input if needed     });      btn.click(handleclick);     input.keypress(function (e) {         if (e.which == 13) {             handleclick();             return false; //<---- add line         }     }); }, 

this script section starts on line 484 in index.js. can play around staff chat here.

upon sending message, see this:

bob nilson @ fri jun 27 2014 21:30:45 gmt+0100 (gmt daylight time)

test message

what looking display dynamic time since message sent. in understanding, believe in theory need edit:

var time = new date(); var time_str = time.tostring('mmm dd, yyyy hh:mm:ss'); 

to timestamp , run through .datetime classes somehow displaying time since. alike facebook, have times lets 10800 (3 hours in seconds) 14400 (4 hours in seconds) 'about 4 hours ago'.

how can achieve this?

first, need able redraw easily. if you're repainting label every frame / cycle, you're fine.

so can store timestamp each comment posted, or can store global variable time of last posted comment.

then, since know current time, can find time since last comment , use if/then statement each of cases:

timediff = currenttime - lasttimestamp; label = "";  if (timediff < 600){    label = "a moment ago" } else if (timediff < 1200){    label = "1 minute ago" } //and on 

then use label variable display message want

alternatively, can create map or parallel arrays map timediff label, loop on each 1 until match.

edit: lasttimestamp variable, can either store globally , update each time post made, or can loop through each of data points each frame/ cycle dynamically every time. global variable idea advantageous in doesn't take processing power. loop idea advantageous in doesn't require update global variable everytime post made.

so, loop idea: assuming have array of posts called posts, filled objects of type post or something, , each post object has timestamp variable, can loop through so:

var lasttimestamp = 0; (var = 0; < posts.length; i++){    if (posts[i].timestamp > lasttimestamp){       lasttimestamp = posts[i].timestamp;    } } 

and so, that's how can lasttimestamp variable. of course, it'll little different in code depending on variable names and/or implementation of posts