Skip to content

Timer events for jQuery

Code and demo are on github.

I wanted to have a simple word count on the Kavanot editor, and this:

$('span.wordcount').text($('#editor').val().split(/\s+/).length+' words');

is enough for me. Keeping it live is straightforward:

$('#editor').on('input', function(){
  $('span.wordcount').text(this.value.split(/\s+/).length+' words');
});

But that won't show the word count when the page is first loaded. The ready event only works on document, and there isn't any event that just fires immediately (as far as I can see). So I created one.

$(selector).on('immediate', function() {...}); just calls the function with the relevant element as this. That's pretty much worthless, but you can combine the events:

$('#editor').on('immediate input', function(){
  $('span.wordcount').text(this.value.split(/\s+/).length+' words');
});

And now the word count shows immediately and is live, and remains DRY.

The other thing I found inconvienient was setInterval, so I created a interval event that works like any event:

$('span').on('interval', function() {this.innerHTML = Date()});

This internally uses the jQuery fx durations to determine the interval duration, so the default is 400 msec. Use a parameter object with {duration: 100} or {duration: 'fast'} to specify the interval. If $.fx.off is set, the interval is always 0 msec, which is probably not what you want.

For example:

$('span').on('interval', function() { this.innerHTML = Date() }; // shows the time every 400 ms (the default)
$('span').on('interval', {duration: 100}, function() { this.innerHTML = Date() }; // shows the time every 100 ms
$('span').off('interval'); // stops the timer

Note that the duration interpreting code uses $.speed which is not documented, so it may become obsolete in a future version of jQuery. I'll implement my own when I need to.

And I created a timeout event that works identically.

None of this is critical, but adds some jQuery syntax sugar and saves having to record interval ID's for clearing. Hope someone finds it useful.

Post a Comment

Your email is never published nor shared. Required fields are marked *