Timeout only in IE7 #275

Open
BMCouto opened this Issue May 21, 2012 · 6 comments

Comments

Projects
None yet
3 participants

BMCouto commented May 21, 2012

Hi,
This seems to be a common problem, but from all the threads I read I couldn't find a solution.

I have the following code:

require([
    //fetch necessary libs first (call global here too to init vars)
    'order!/assets/scripts/jquery-1.7.2.min.js',
    'order!/assets/scripts/jquery-ui-1.8.20.custom.min.js',
    'order!/assets/scripts/jquery.address-1.5.min.js',
    'order!/assets/scripts/jpreLoader.min.js',
    'order!/assets/scripts/jquery.transform2d.js',
    'order!/assets/scripts/jquery.tools.min.js',
    'order!/assets/scripts/jquery.selectbox-0.1.3.min.js',
    'order!/assets/scripts/global.js'
], function(){
    //then fetch site scripts
    require([
        '/assets/scripts/myscript1.js',
        '/assets/scripts/myscript2.js',
        '/assets/scripts/myscript3.js',
        '/assets/scripts/myscript4.js'
    ], function(){
        //my init function
    });

});

Works fine in all browsers, but gives me a timeout on IE7, any idea of what may be causing this?

Owner

jrburke commented May 22, 2012

It could be that IE7 is just slower in processing. You can adjust the waitSeconds config to a longer value to see if that fixes it. Default is 7 seconds.

I suggest using baseUrl config and set it to '/assets/scripts' and then the above code gets a bit shorter. Also, if this is your "main" JS file (call it main.js for purposes of this example), I suggest loading it via <script data-main="/assets/scripts/main.js" src="/assets/scripts/require.js"></script>. Then you can use define to define a module that can be easier to target for optimization:

require.config({
    baseUrl: '/assets/scripts',
    waitSeconds: 15
});

define([
    'require',
    //fetch necessary libs first (call global here too to init vars)
    'order!/jquery-1.7.2.min',
    'order!jquery-ui-1.8.20.custom.min',
    'order!jquery.address-1.5.min',
    'order!jpreLoader.min',
    'order!jquery.transform2d',
    'order!jquery.tools.min',
    'order!jquery.selectbox-0.1.3.min',
    'order!global'
], function(require){
    //then fetch site scripts
    require([
        'myscript1',
        'myscript2',
        'myscript3',
        'myscript4'
    ], function(){
        //my init function
    });
});

That will not directly help the timeout issue you are seeing, but it will help make doing optimization builds with r.js easier, which can also help with performance by reducing the number of http requests.

I also suggest starting to move away from the 'order' plugin and use something like the use or wrap plugin instead, since the order plugin will be going away for requirejs 2.0, and it will be easier to transition from "use" or "wrap" to the "shim" config in 2.0.

BMCouto commented May 23, 2012

Hi James,

Thanks for those tips. Although I'm getting the following error:

Uncaught Error: Mismatched anonymous define() module: function (require){

Any idea of what it might be?
Also, I would be pleased to quit order.js but which one would you advice how can I adapt what I have right now to "use" or "wrap"?

Owner

jrburke commented May 23, 2012

Some details on the mismatched anonymous error:

http://requirejs.org/docs/errors.html#mismatch

I see more examples with 'use' in them, so although they both would do the job, you will likely be able to share code/experience more with other users of 'use'.

BMCouto commented May 23, 2012

I read that but haven't understood, because I'm not calling any of the mentioned scripts with a script tag on the HTML, and I don't understand what do you mean on this last point:
"If the problem is the use of loader plugins or anonymous modules but the RequireJS optimizer is not used for file bundling, use the RequireJS optimizer."

Also, I found some difficulties using "use" properly. Could you provide an usage example with my code?

Thanks!

Owner

jrburke commented Jun 7, 2012

I read that but haven't understood, because I'm not calling any of the mentioned scripts with a script tag on the HTML, and I don't understand what do you mean on this last point:
"If the problem is the use of loader plugins or anonymous modules but the RequireJS optimizer is not used for file bundling, use the RequireJS optimizer."

That last point is about if you use some other way to combine your scripts together. For example if you just do a simple concatenation of the source scripts, then that will not work, since they will all have anonymous define()s and a file that contains more than one module needs to have named modules. The r.js optimizer will name the modules when it combines them.

Also, I found some difficulties using "use" properly. Could you provide an usage example with my code?

requirejs 2.0 is out now, so hopefully you can just use the "shim" config which is similar to "use", but the idea is that you mention the dependencies a script has instead of trying to order them in a series. Example:

requirejs.config({
    shim: {
        'jquery.selectbox-0.1.3.min': ['jquery']
    }
});

jstxx commented Dec 19, 2012

@BMCouto Would you happen to be running a 64 bit browser by any chance? I've received a similar error under certain conditions

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment