javascript - require.js doesn't trigger the callback function sometimes - Stack Overflow

admin管理员组

文章数量:1327481

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

Share Improve this question Follow edited Feb 2, 2014 at 2:10 Edgar Alexander asked Feb 2, 2014 at 0:59 Edgar AlexanderEdgar Alexander 37444 silver badges1111 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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

本文标签： javascriptrequirejs doesn39t trigger the callback function sometimesStack Overflow