javascript - require.js 有时不触发回调函数

Question

嗯，这就像我两天内第三个关于 require.js 的问题，问题是我有一个包含以下模块的项目:

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

并且在主文件中，所有模块加载后必须调用的回调有时会被触发，有时不会。

我不打算发布任何代码，因为我不认为它有什么问题，但我不得不提到它不可能是加载顺序的问题，因为我的文件没有任何彼此的依赖。这真的很奇怪，而且我的文件不是太大(第一个有 73 行，第二个有 18 行)

那么问题来了，哪里出了问题？ require.js 错误或其他问题？

编辑:这是我的模块的代码:

主要.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;
        })();
    }
);

main 函数中的警报仅在 10% 的情况下弹出。

Answer 1

问题不在于 RequireJS 或您如何使用 RequireJS。问题是有时 load 事件发生 before window.addEventListener('load', main, false); 被执行。我敢打赌，如果您将 main.js 的主体更改为以下内容，它将始终有效:

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

您可能想使用 domReady plugin ，它处理这样的问题。像这样的东西:

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