{"id":2993,"date":"2013-09-16T15:22:45","date_gmt":"2013-09-16T21:22:45","guid":{"rendered":"http:\/\/bililite.com\/blog\/?p=2993"},"modified":"2020-06-21T17:39:50","modified_gmt":"2020-06-21T23:39:50","slug":"timer-events-for-jquery","status":"publish","type":"post","link":"https:\/\/bililite.com\/blog\/2013\/09\/16\/timer-events-for-jquery\/","title":{"rendered":"Timer events for jQuery"},"content":{"rendered":"<strong>This is obsolete. The documentation is now on <a href=http:\/\/github.bililite.com\/timerevents>github.bililite.com\/timerevents<\/a>.<\/strong>\r\n\r\n<p>Code and demo are on <a href=\"https:\/\/github.com\/dwachss\/timerevents\">github<\/a>.<\/p>\r\n\r\n<p>I wanted to have a simple word count on the <a href=\"http:\/\/kavanot.me\/Home\/edit\">Kavanot editor<\/a>, and this:<\/p>\r\n<pre><code class=\"language-javascript\" >$('span.wordcount').text($('#editor').val().split(\/\\s+\/).length+' words');<\/code><\/pre>\r\n<p>is enough for me. Keeping it live is straightforward:<\/p>\r\n<pre><code class=\"language-javascript\" >$('#editor').on('input', function(){\r\n  $('span.wordcount').text(this.value.split(\/\\s+\/).length+' words');\r\n});<\/code><\/pre>\r\n<p>But that won't show the word count when the page is first loaded. The <code class=\"language-javascript\" >ready<\/code> event only works on <code class=\"language-javascript\" >document<\/code>, and there isn't any event that just fires immediately (as far as I can see). So I created one.<\/p>\r\n\r\n<p><code class=\"language-javascript\" >$(selector).on('immediate', function() {...});<\/code> just calls the function with the relevant element as <code class=\"language-javascript\" >this<\/code>. That's pretty much worthless, but you can combine the events:<\/p>\r\n<pre><code class=\"language-javascript\" >$('#editor').on('immediate input', function(){\r\n  $('span.wordcount').text(this.value.split(\/\\s+\/).length+' words');\r\n});<\/code><\/pre>\r\n<p>And now the word count shows immediately and is live, and remains <a href=\"http:\/\/en.wikipedia.org\/wiki\/Don't_repeat_yourself\">DRY<\/a>.<\/p>\r\n<!--more-->\r\n\r\nThe other thing I found inconvienient was <a href=\"http:\/\/www.w3schools.com\/jsref\/met_win_setinterval.asp\"><code class=\"language-javascript\" >setInterval<\/code><\/a>, so I created a <code class=\"language-javascript\" >interval<\/code> event that works like any event:<\/p>\r\n<pre><code class=\"language-javascript\" >$('span').on('interval', function() {this.innerHTML = Date()});<\/code><\/pre>\r\n<p>This internally uses the jQuery fx durations to determine the interval duration, so the default is 400 msec. Use a parameter object with <code class=\"language-javascript\" >{duration: 100}<\/code> or <code class=\"language-javascript\" >{duration: 'fast'}<\/code> to specify the interval. If <a href=\"http:\/\/api.jquery.com\/jQuery.fx.off\/\"><code class=\"language-javascript\" >$.fx.off<\/code><\/a> is set, the interval is always 0 msec, which is probably not what you want.<\/p>\r\n<p>For example:<\/p>\r\n<pre><code class=\"language-javascript\" >$('span').on('interval', function() { this.innerHTML = Date() }; \/\/ shows the time every 400 ms (the default)\r\n$('span').on('interval', {duration: 100}, function() { this.innerHTML = Date() }; \/\/ shows the time every 100 ms\r\n$('span').off('interval'); \/\/ stops the timer<\/code><\/pre>\r\n\r\n<p>Note that the duration interpreting code uses <code class=\"language-javascript\" >$.speed<\/code> which is not documented, so it may become obsolete in a future version of jQuery. I'll implement my own when I need to.<\/p>\r\n\r\n<p>And I created a <a href=\"http:\/\/www.w3schools.com\/jsref\/met_win_settimeout.asp\"><code class=\"language-javascript\" >timeout<\/code><\/a> event that works identically.<\/p>\r\n<p>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.<\/p>\r\n","protected":false},"excerpt":{"rendered":"This is obsolete. The documentation is now on github.bililite.com\/timerevents. 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 [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"_links":{"self":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/2993"}],"collection":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/comments?post=2993"}],"version-history":[{"count":9,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/2993\/revisions"}],"predecessor-version":[{"id":3650,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/2993\/revisions\/3650"}],"wp:attachment":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/media?parent=2993"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/categories?post=2993"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/tags?post=2993"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}