Question

I have implemented this code:

<script>
       var mod_PPfix = false;

        Modernizr.load({
            test: Modernizr.csstransitions && Modernizr.input.required,
            nope: ['script1.js', 'script2.js'],
            complete: function () {

                mod_PPfix = true;
                console.log('ppfix');
            }
        });
</script>

few lines after, I’ve placed this other script

<script>               
   if (!mod_PPfix) {
       $(document).ready(function() { 

           console.log('this should be seen only if modernizr's tests are true');
       });
   }
</script>

Now I’m really a rookie with javascript, but I expected from the code above to show the second console.log() only if the modernizr tests result to be true. Still the second log is recorded even when the tests result negative.

As far as I can tell, in the console the second console.log() message appears before the first one saying ‘ppfix’ so I guess that it should be a sort of load timing issue, but I really don’t know why. What am I doing wrong?

If it can help I’m using Jquery as library.

Thank you!

Answer 1

If you want to see the the second log message when the tests are true, don’t you mean if (mod_PPfix)? Your version will log output the second message if the tests failed (see this fiddle)

When you use Modernizr.load things happen asynchronously so the second <script> might run before script1.js and script2.js finish loading and therefore before the complete callback fires. Whatever you want to do in the second <script> you should call in the complete callback. For example

    Modernizr.load({
        test: Modernizr.csstransitions && Modernizr.input.required,
        nope: ['script1.js', 'script2.js'],
        complete: function () {
            initialize_me();
        }
    });

Where the initialize_me() function would be defined elsewhere and might have have code that looks like

if (Modernizr.csstransitions && Modernizr.input.required) {
    // Use CSS3
} else {
    // Do things that depended on script1.js and script2.js being loaded
}