Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I've got some code that I want to run when certain HTML elements are added to the page.
To do this, I have a "runOnRender" function:

runOnRender: function (func, args, interval) {
            var that = this;
            var guid = hb.getGuid().substr(0,7);

            var checkFunc = function () {
                if (that.$el.height() > 0 && that.$el.width() > 0) {
                    that[guid] = 0;
          , args);

            this[guid] = setInterval(checkFunc, interval || 200);

Setting the interval to 200 is about as high as I can go before there is often a noticeable lag in the event firing. The last thing I want is my users wondering why a button just got clicked or seeing a label text change, etc.

Here's the catch. It is entirely possible that this "runOnRender" will be set up.....but the User never causes the action that makes the HTML element in question hit the DOM....which means that this code would just keep infinitely running as long as the page is open.

I'm on a nice, powerful, dev I'm wondering what the cost of this code is and whether there is a better way.

share|improve this question
Can't you intercept the event ? Using a rendering loop looks like an horrible idea. Most javascript architectures are event based. – Denys Séguret Jan 15 '13 at 18:14
@dystroy : This is me intercepting the "event". In this case, "event" means "function we want to run when the html element is added to the page". If you can think of a different method to keep an eye on that, please let me know. – James P. Wright Jan 15 '13 at 18:51
@JamesP.Wright: HTML elements don't add themselves. Can you add a callback to the code that is adding the elements? – kevin cline Jan 15 '13 at 18:55
You can't add the method call to the code that adds the elements? – Mike Partridge Jan 15 '13 at 18:58
And if you don't want call anything directly in the code that adds the elements, why not fire a custom event and call your function in a listener for that custom event? Or are you writing a plugin and don't want to require users to alter their code at all? – apsillers Jan 15 '13 at 19:13
up vote 4 down vote accepted

Mostly, don't worry about it, you can run something like several million light lines of code per second. If you spend a few thousand of those doing some check, no worries. The overhead of the interval construction itself should be negligible.

If you want to be sure, put in a loop that runs the body of checkFunc 100 times, check with task manager how much CPU that eats, and verify that the page is still responsive. If that checks out good even a dated smart phone should do the normal job handily.

It is also worth noting that most modern browsers will slow script execution on inactive tabs by only letting them execute code something like once per second, so as soon as the tab is inactive it doesn't matter if you ask for once per 20 or 200 ms, you only get once per 1000 ms anyway, and intervals do not catch up.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.