{"id":135,"date":"2011-06-27T06:34:09","date_gmt":"2011-06-27T06:34:09","guid":{"rendered":"http:\/\/patternweaver.com\/blog\/?p=135"},"modified":"2011-12-19T07:47:34","modified_gmt":"2011-12-19T07:47:34","slug":"string-whenindom","status":"publish","type":"post","link":"http:\/\/patternweaver.com\/blog\/2011\/06\/string-whenindom\/","title":{"rendered":"String.whenInDOM"},"content":{"rendered":"<p>I haven&#8217;t really had the time to make a post lately, as my conspicuous absence indicates. I&#8217;ve got an awesome gig at StylePage which keeps me busy and a number of side projects which steal the fleeting moments I can spare. While I&#8217;m not ready to peel back the curtains on any of my big projects, I think I&#8217;m just going to post some of the more useful utility functions I&#8217;ve built.<\/p>\n<p>The first of which is String.whenInDOM which is a string primitive I could use to execute some code when a particular ID finally finds it&#8217;s way to the DOM. I use it for painless recursive asynchronous rendering. It also uses a a scaling interval, so if the result isn&#8217;t coming back quickly we don&#8217;t block up the browser, especially if we&#8217;re generating a large volume of these requests:<\/p>\n<script src=\"https:\/\/gist.github.com\/1495937.js?file=String.whenInDOM.js\"><\/script><noscript><pre><code class=\"language-javascript javascript\">if(!String.whenInDOM){\n    if(!String.defaultReplacementTimeout)\n        String.defaultReplacementTimeout = 16384;\n    String.implement({\n        whenInDOM : function(\n            callback,\n            delayCallback,\n            timeoutCallback,\n            timeout,\n            counter\n        ){\n            if(!timeout) timeout = String.defaultReplacementTimeout;\n            if(!counter) counter = 0;\n            if(!timeoutCallback) timeoutCallback = function(event){\n                throw(\n                    'Element did not appear in DOM(\\''+event.id+\n                    '\\') after '+event.time+'ms'\n                );\n            };\n            if(!document.id(this)){\n                \/\/ we want to get the DOM node when it appears\n                \/\/ so we're looking for a gradient falloff of intervals\n                \/\/ as it approaches timeout\n                var delayTime = Math.pow(2, counter);\n                if(delayTime &gt;= timeout){\n                    timeoutCallback({\n                        id : this,\n                        count : counter,\n                        time : delayTime\n                    });\n                }\n                counter++;\n                this.whenInDOM.delay(delayTime, this,\n                    [callback, delayCallback, timeoutCallback, timeout, counter]\n                );\n                if(delayCallback) delayCallback({\n                    count : counter,\n                    time : delayTime\n                });\n            }else{\n                callback(document.id(this));\n            }\n        }\n    });\n}<\/code><\/pre><\/noscript>\n<p>It&#8217;s usage is pretty simple, just pass it a function to execute once the id is found. you can also optionally pass it a delay function as it&#8217;s second argument (executes each time we look for the id and it&#8217;s not found) and a timeout function (executes if we reach the ~16 second timeout (16384 ms))<\/p>\n<script src=\"https:\/\/gist.github.com\/1495937.js?file=whenInDOM_ex.js\"><\/script><noscript><pre><code class=\"language-javascript javascript\">'my_awesome_id'.whenInDOM(function(){\n    \/\/do stuff here\n});<\/code><\/pre><\/noscript>\n<p>That&#8217;s about it&#8230; till next time!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I haven&#8217;t really had the time to make a post lately, as my conspicuous absence indicates. I&#8217;ve got an awesome gig at StylePage which keeps me busy and a number of side projects which steal the fleeting moments I can spare. While I&#8217;m not ready to peel back the curtains on any of my big [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,11],"tags":[],"class_list":["post-135","post","type-post","status-publish","format-standard","hentry","category-js","category-mootools"],"_links":{"self":[{"href":"http:\/\/patternweaver.com\/blog\/wp-json\/wp\/v2\/posts\/135","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/patternweaver.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/patternweaver.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/patternweaver.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/patternweaver.com\/blog\/wp-json\/wp\/v2\/comments?post=135"}],"version-history":[{"count":0,"href":"http:\/\/patternweaver.com\/blog\/wp-json\/wp\/v2\/posts\/135\/revisions"}],"wp:attachment":[{"href":"http:\/\/patternweaver.com\/blog\/wp-json\/wp\/v2\/media?parent=135"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/patternweaver.com\/blog\/wp-json\/wp\/v2\/categories?post=135"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/patternweaver.com\/blog\/wp-json\/wp\/v2\/tags?post=135"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}