1

I'm wondering what the best way is to perform the below functionality:

  1. Read an ISO 8601 timestamp, say from an attribute of a HTML element
  2. Check whether a certain amount of time has elapsed
  3. Do function() if this amount of time has elapsed

I could think of a few ways to attack this problem, but all of them seem a little clumsy and difficult to provide flexibility with. This doesn't have to update in real-time, but I am using jQuery and the TimeAgo plugin (https://github.com/rmm5t/jquery-timeago), so we may be able to do that.

I'm sure other people have done or attempted to do this, but have not seen any definitive answers.

For an example, I have the HTML:

<abbr class="timeago" title="2012-12-11T17:00:00">~6 hours ago</abbr>

and I want to insert a <span class="new">New!</span> element after this if the timestamp is less than, say, 10 minutes old.

We can do something like this to get us started:

$('abbr.timeago').each(function() {

    var timestamp = $(this).attr("title");

    if (function to compare time?) {
        $(this).insertAfter('<span class="new">New!</span>');
    }
});

What's the best way to compare the time?

wnajar
  • 747
  • 1
  • 7
  • 27

1 Answers1

1

Most modern browsers accept ISO 8601 within the date construtor. All you need to do is calculate the difference between now and then in minutes.

function isLessThan10MinAgo( date ) {
  return 0|(new Date() - new Date( date )) * 1.67e-5 <= 10;
}

// Current time: 22:52
console.log( isLessThan10MinAgo('2012-12-11T22:48:00-05:00')); //=> true
console.log( isLessThan10MinAgo('2012-12-11T22:12:00-05:00')); //=> false

Explanation:

0| // floor the result
(new Date() - new Date( date ) // obtain difference between now and then in ms.
* 1.67e-5 // convert to aprox. minutes
<= 10 // return whether is less than 10 min

Usage:

$('abbr.timeago').each(function() {
  if ( isLessThan10MinAgo( $(this).attr('title') ) ) {
    $(this).after('<span class="new">New!</span>');
  }
});
elclanrs
  • 92,861
  • 21
  • 134
  • 171
  • One comment on your answer, the function returns either 1 (will be taken as true) or 0 (false) not actually true or false. So I guess we would have to add `if ( isLessThan10MinAgo( $(this).attr('title') ) == 1 ) { $(this).after('New!'); }` I'm working on implementing it now. Thank you for the answer, this seems like a nice way to do it! – wnajar Dec 12 '12 at 05:04
  • 1
    `0` is falsy and `1` is truthy you don't need the comparison but you can always cast a boolean with `!!` like this: `return !!(0|(new Date() - new Date( date )) * 1.67e-5 <= 10)` – elclanrs Dec 12 '12 at 05:23
  • The code seems right to me but I can't get it to actually work. There must be something wrong with the rest of the code (the part that inserts the new ``? Here is a jsfiddle with a simplified example. I set a date way in the future as an example so the result of the function will always be 1. http://jsfiddle.net/7cHZa/9/ any thoughts? – wnajar Dec 12 '12 at 05:28
  • Mmmm... you didn't include jQuery library in your fiddle. – elclanrs Dec 12 '12 at 05:30
  • HOWEVER, now I'm trying to use this on a live site and when I paste the code into the Chrome console, I get `SyntaxError: Unexpected token ILLEGAL` Oh no... any thoughts? – wnajar Dec 12 '12 at 05:38
  • I think this is due to copy/paste...? – wnajar Dec 12 '12 at 05:39
  • Yes, copy/paste. For what it's worth, still can't get it to work on the live site but that's some other issue of mine, so I'll mark this as correct. – wnajar Dec 12 '12 at 05:43