Well, this is like my third question about require.js in two days, well the problem is that I have a project with the following modules:

1. main.js
2. res.js
3. juego.js

And in the main file the callback that must be called once all the modules are loaded sometimes is triggered and sometimes it is not.

I'm not going to post any code because I don't believe that something is wrong with it, but I have to mention that it couldn't be an issue of the load order because my files doesn't have any dependency from each other. It is really weird, and my files are not too big (first has 73 lines and the second one 18)

So the question is, what could be wrong? a require.js bug or something else?

EDIT: here is the code of my modules:

main.js:

require
(
    ['cliente/juego', 'cliente/res'], 
    function (juego, res) 
    {
        function main () 
        {
            alert('ok');
        }

        window.addEventListener('load', main, false);
    }
);

res.js:

define
(
    function () 
    {
        return (function () 
        {
            var recursos = 
            {
                soldado : { ruta : 'res/imagenes/soldados/1.png', tipo : 'Image', fuente : null }
            };
            var metodos = {};
            var cargados = 0;
            var totales = 0;
            var listos = false; // Todavía no se han cargado los recursos

            function terminarCarga (evento) 
            {
                // Cada vez que se cargue un recurso se incrementará el progreso
                cargados++;

                if (cargados == totales) 
                {
                    listos = true; // Recursos cargados y listos para usarse

                    // Acción a seguir una vez cargados todos los recursos
                }
            }

            metodos.getTotales = function () 
            {
                return totales;
            }

            metodos.getListos = function () 
            {
                return listos;
            }

            metodos.cargar = function () 
            {
                // Carga todos los recursos

                var recurso;

                for (var i in recursos) 
                {
                    totales++;
                    recurso = recursos[ i ];

                    if (recurso.tipo == 'Image') 
                    {
                        recurso.fuente = new Image;
                        recurso.fuente.onload = terminarCarga;
                        recurso.fuente.src = recurso.ruta;
                    }
                    else
                    {
                        recurso.fuente = new Audio;
                        recurso.fuente.addEventListener('loadeddata', terminarCarga, false);
                        recurso.fuente.src = recurso.ruta;
                    }
                }
            }

            metodos.get = function (nombre) 
            {
                return recursos[ nombre ].fuente;
            }

            return metodos;
        })();
    }
);

juego.js:

define
(
    function () 
    {
        return (function () 
        {
            var metodos = {};
            metodos.getContexto = function () 
            {
                // Recordar llamar ésta función una vez cargada la página
                this.canvas = document.querySelector('canvas');
                this.contexto = this.canvas.getContext('2d');
            }

            return metodos;
        })();
    }
);

The alert in the main function only popups in the 10% of all the cases.

Well, this is like my third question about require.js in two days, well the problem is that I have a project with the following modules:

1. main.js
2. res.js
3. juego.js

And in the main file the callback that must be called once all the modules are loaded sometimes is triggered and sometimes it is not.

I'm not going to post any code because I don't believe that something is wrong with it, but I have to mention that it couldn't be an issue of the load order because my files doesn't have any dependency from each other. It is really weird, and my files are not too big (first has 73 lines and the second one 18)

So the question is, what could be wrong? a require.js bug or something else?

EDIT: here is the code of my modules:

main.js:

require
(
    ['cliente/juego', 'cliente/res'], 
    function (juego, res) 
    {
        function main () 
        {
            alert('ok');
        }

        window.addEventListener('load', main, false);
    }
);

res.js:

define
(
    function () 
    {
        return (function () 
        {
            var recursos = 
            {
                soldado : { ruta : 'res/imagenes/soldados/1.png', tipo : 'Image', fuente : null }
            };
            var metodos = {};
            var cargados = 0;
            var totales = 0;
            var listos = false; // Todavía no se han cargado los recursos

            function terminarCarga (evento) 
            {
                // Cada vez que se cargue un recurso se incrementará el progreso
                cargados++;

                if (cargados == totales) 
                {
                    listos = true; // Recursos cargados y listos para usarse

                    // Acción a seguir una vez cargados todos los recursos
                }
            }

            metodos.getTotales = function () 
            {
                return totales;
            }

            metodos.getListos = function () 
            {
                return listos;
            }

            metodos.cargar = function () 
            {
                // Carga todos los recursos

                var recurso;

                for (var i in recursos) 
                {
                    totales++;
                    recurso = recursos[ i ];

                    if (recurso.tipo == 'Image') 
                    {
                        recurso.fuente = new Image;
                        recurso.fuente.onload = terminarCarga;
                        recurso.fuente.src = recurso.ruta;
                    }
                    else
                    {
                        recurso.fuente = new Audio;
                        recurso.fuente.addEventListener('loadeddata', terminarCarga, false);
                        recurso.fuente.src = recurso.ruta;
                    }
                }
            }

            metodos.get = function (nombre) 
            {
                return recursos[ nombre ].fuente;
            }

            return metodos;
        })();
    }
);

juego.js:

define
(
    function () 
    {
        return (function () 
        {
            var metodos = {};
            metodos.getContexto = function () 
            {
                // Recordar llamar ésta función una vez cargada la página
                this.canvas = document.querySelector('canvas');
                this.contexto = this.canvas.getContext('2d');
            }

            return metodos;
        })();
    }
);

The alert in the main function only popups in the 10% of all the cases.

• javascript
• module
• callback
• requirejs

2 Answers 2

The problem is not with RequireJS or how you use RequireJS. The problem is that sometimes the load event happens before window.addEventListener('load', main, false); is executed. I bet if you change the body of your main.js to the following, it will always work:

require(['cliente/juego', 'cliente/res'], function (juego, res) {
    console.log('ok');
});

You might want to use the domReady plugin, which takes care of problems like this. Something like:

require(['domReady', 'cliente/juego', 'cliente/res'], function (domReady, juego, res) {
    domReady(function () {
        alert('ok');
    });
});

I have seen random load errors before, don't know if that's the cause of what you're seeing or not. If so, have a look at this; sometimes the web server itself is the culprit. It was in my case, anyway.

https://groups.google./forum/#!msg/requirejs/x5Z-eZMzKwI/rbOSMNULftgJ

EDIT:

The callback is definitely being called, every time. I changed the code in main so it looks like this:

require(
    ['cliente/juego', 'cliente/res'], 

    function (juego, res) {
        console.log(juego, res);

        function main () {
            alert('ok');
        }

        window.addEventListener('load', main, false);
    }
);

And I'm getting this output in the console:

Object {getContexto: function}

Object {getTotales: function, getListos: function, cargar: function, get: function}

EDIT:

I think this is what you're looking for: http://requirejs/docs/api.html#pageload