{"id":698,"date":"2013-04-02T16:07:52","date_gmt":"2013-04-02T03:07:52","guid":{"rendered":"http:\/\/thunderguy.com\/semicolon\/?p=698"},"modified":"2013-04-02T16:07:52","modified_gmt":"2013-04-02T03:07:52","slug":"jquery-waitfor-plugin","status":"publish","type":"post","link":"https:\/\/thunderguy.com\/semicolon\/2013\/04\/02\/jquery-waitfor-plugin\/","title":{"rendered":"jQuery.waitFor plugin"},"content":{"rendered":"

Sometimes jQuery(document).ready()<\/code> isn’t fast enough. It doesn’t do anything until the entire DOM has loaded. But sometimes you want your code to run against your DOM elements immediately rather than waiting until the rest of the page DOM is done. You can do this with jQuery.waitFor<\/strong>, a new plugin.<\/p>\n

Usage<\/h3>\n

waitFor<\/strong> uses jQuery’s Deferred API<\/a>, so its usage is clean and consistent with the rest of jQuery’s event-handling functions. To use it, call jQuery.waitFor()<\/code> with a selector, and then call done(function() {...})<\/code> on the result. As soon as an element appears in the DOM that matches the given selector, your function will be called, with a jQuery object containing the matched element (or elements) as the argument. If the DOM already contains matching elements, the function will be called immediately.<\/p>\n

You can also call fail(function() {...})<\/code> on waitFor<\/code>‘s return value to trigger a callback if the element has not<\/em> appeared by the time the full DOM is loaded.<\/p>\n

Example<\/h3>\n
$.waitFor(\"header\")\r\n    .done(function(elements) { elements.addClass(\"fancy\"); })\r\n    .fail(function() { $(\"body\").append(\"<p>Huh?<\/p>\"); })<\/code><\/pre>\n
This will add the class “fancy” to the HTML5 header element as soon as it is loaded. If it hasn’t appeared by the time the document is ready, it adds a new element to the end of the document instead.<\/p>\n
Download<\/h3>\n
Download waitFor from the jQuery plugin page<\/a>.<\/p>\n
You can also fork waitFor at Github<\/a>. Please test it and send me your pull requests.<\/p>\n
Usage notes<\/h3>\n
The function works by polling the DOM at short intervals. By default it polls every 23 milliseconds, but you can change this by setting $.waitFor.defaultIntervalMs<\/code> before calling $.waitFor()<\/code>. Alternatively you can pass something like {intervalMs: 100}<\/code> as the third argument the first time you call $.waitFor()<\/code>. But don’t bother changing this unless you really know what you’re doing.<\/p>\n
waitFor<\/strong> returns a jQuery Promise<\/a> object, so apart from done()<\/code> and fail()<\/code>, you can also call other methods on it like always()<\/code> and then()<\/code>. See the documentation<\/a> for full details.<\/p>\n
In order for waitFor to be useful, you will probably want to include the plugin code in your document head<\/code>. Therefore you will also need to include jQuery in the head<\/code>.<\/p>\n
waitFor works by polling the DOM to see if anything matches the selector. Therefore if the selector is particularly slow to evaluate, there may be performance problems. So don’t do that!<\/p>\n
History<\/h3>\n
More than 5 years ago(!) I wrote a plugin called elementReady<\/a> that does the same thing as waitFor. It worked well but had some restrictions (for performance) and its usage syntax was not beautiful. After jQuery’s Deferred API<\/a> came out, I tinkered with rewriting elementReady to use it, since it seemed a natural fit. As part of this, I renamed it so code using it would read better: $.waitFor(something).done(callback)<\/code>. And finally, last month I realised that the jQuery folks had upgraded their plugin site, so I thought I would finally release waitFor<\/strong> to the world.<\/p>\n","protected":false},"excerpt":{"rendered":"
Sometimes jQuery(document).ready() isn’t fast enough. It doesn’t do anything until the entire DOM has loaded. But sometimes you want your code to run against your DOM elements immediately rather than waiting until the rest of the page DOM is done. You can do this with jQuery.waitFor, a new plugin. Usage waitFor uses jQuery’s Deferred API, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[40,82,81],"class_list":["post-698","post","type-post","status-publish","format-standard","hentry","category-general","tag-jquery","tag-plugin","tag-waitfor"],"_links":{"self":[{"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/posts\/698","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/comments?post=698"}],"version-history":[{"count":3,"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/posts\/698\/revisions"}],"predecessor-version":[{"id":701,"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/posts\/698\/revisions\/701"}],"wp:attachment":[{"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/media?parent=698"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/categories?post=698"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/tags?post=698"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}