Question

I have the following in the body of a php page:

<?php if($foo) : ?>

    <script>
        js_func();
    </script>

<?php else: ?>

    //Do Something else

<?php endif; ?>

Based on the PHP conditional I either do or do not want to run js_func().

However if I am loading all of my scripts (including the script the defines js_func()) at the bottom of my page this will results in an error.

One possible solution would be to load the external script BEFORE calling js_func() but I understand that for performance reasons I shouldn’t do that.

I could use $(document).ready(function() {}); but this just moves the error as jQuery is also loaded in the footer.

The only other options I can think of is to use window.onload or never call a js function inline. How does everyone else solve this issue?

Many thanks.

EDIT:

@Nile – Im not sure what you mean. Why would I comment out code that I want to execute?
@haynar1658 – I don’t want to execute JS in the else scenario.
@Matthew Blancarte – Understood. That leads to my question, what’s the best way to make sure that the js I need loads before that function is instantiated? Include the script before it? Use window.onload? etc.

Answer 1

I think you are making a rod for your own back. Depend on the question you described, you want to put all the function definition script block after the place where them being called. It’s Impossible!
If you indeed need to do this, does this can help? :

<script>    
    var fns = []; /* use fns to keep all the js code  
                     which call the functions defined after. */  
</script>


<script>
    //wrapp your code in a function and then push it into fns.   
    fns.push(function(){  
        js_func();  
    }) 
</script>


//script tags for loading your function  definition js script.  
<script src="path/to/jquery-any-version.js"></script>  
<script src="path/to/other-libraries.js"></script>


<script>
    //after your definition js scripts are loaded ,  call all functions in fns  
    for(var i=0, len=fns.length; i<len; i++){  
        var fn = fns[i];  
        fn.apply(this, []/* arguments that provided  as an array */);  
    }
</script>