Call function once in jquery ready queue

Question

We have code that spits out several script blocks which add identical functions to the queue that gets called when the document is ready. For example:

$(document).ready(function(){
    alert('hey');
});
$(document).ready(function(){
    alert('hey');
});
$(document).ready(function(){
    alert('hey');
});

This is not causing any problems but of course its unnecessary to call the same code several times.

Without changing the code that generates the repeated blocks, is there a way to make jquery only run the first code block and skip the rest?

Keep in mind that there is the possibility that the ready queue has other functions before and after the repeated code.

Why do you have duplicated code in the first place? is it really necessary? instead of coming up with a solution that effectively removes call to your duplicated code, wouldn't it be better to go to the source of the problem and remove the duplicated code? — netbrain
– netbrain, Commented May 18, 2011 at 8:13
@netbrain good idea! i've briefed someone else pointing to your enlightening comment and they are busily investigating. as for the poor soul still trying to answer this specific question, he is still digging! — zaf
– zaf, Commented May 18, 2011 at 8:27
keep your code DRY in every layer backend AND frontend. It seems to me that you have the same javascript code across several page fragments, and when the page fragments are assembled to a single html page, you get the result of what you are experiencing now. is this a correct assumption? — netbrain
– netbrain, Commented May 18, 2011 at 9:51

jcvandan · Accepted Answer · 2011-05-18 09:06:32Z

1

I would use an object literal to wrap duplicate code, and set a boolean when it has been called once so it will not be run again:

$(document).ready(function(){
    DuplicateHelper.SomeMethod1();
});
$(document).ready(function(){
    DuplicateHelper.SomeMethod1();
});
$(document).ready(function(){
    DuplicateHelper.SomeMethod1();
});

var DuplicateHelper = {
    HasMethod1Run: false,

    SomeMethod1: function() {
        if (!this.HasMethod1Run) {
            // do logic

            this.HasMethod1Run = true;
        }
    }
}

EDIT

You don't have to use the object literal for the code if you are generating the code dynamically, but you can use the same principle with the boolean:

var runCode = true;

$(document).ready(function(){
    if (runCode) {
        DuplicateHelper.SomeMethod1();
        runCode = false;
    }
});
$(document).ready(function(){
    if (runCode) {
        DuplicateHelper.SomeMethod1();
        runCode = false;
    }
});
$(document).ready(function(){
    if (runCode) {
        DuplicateHelper.SomeMethod1();
        runCode = false;
    }
});

However, I agree with netbrain that this situation is indicative of problems elsewhere in the architecture of your solution.

edited May 18, 2011 at 9:06

answered May 18, 2011 at 8:20

jcvandan

14.4k19 gold badges69 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

zaf Over a year ago

nice but that would be changing the code that generates the individual code blocks.

Collectives™ on Stack Overflow

Call function once in jquery ready queue

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related