admin管理员组文章数量:1326303
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:
- main.js
- res.js
- 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:
- main.js
- res.js
- 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.
Share Improve this question edited Feb 2, 2014 at 2:10 Edgar Alexander asked Feb 2, 2014 at 0:59 Edgar AlexanderEdgar Alexander 3744 silver badges11 bronze badges2 Answers
Reset to default 7The 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
版权声明:本文标题:javascript - require.js doesn't trigger the callback function sometimes - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742206503a2432912.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论