Realizo una carga dinámica del siguiente archivo:
full.js
window.APP = {
SKIN: 'FSKIN',
Run: function( ) {
var layout = {
};
console.log( 'Lanzando <full>' );
debugger;
setTimeout( window.SPINNER.stop( ), 2000 );
}
}
Al decir dinámica, me refiero a que lo cargo mediante AJAX, no con
<script src="full.js"></script>
Al cargar la página en el navegador, funciona bien. El resto del codigo hace lo que tiene que hacer, el archivo es cargado, y se llama a la funcion APP.Run( )
.
Al llegar a debugger;
, todo es correcto. Si en la consola tecleo
typeof( SPINNER.stop )
me responde
"function"
Pero si continuo a partir de ahí, o directamente quito debugger
, me muestra el error indicado
Uncaught SyntaxError: Unexpected identifier
seguido de un código VM
, y no me muestra el código fuente implicado. No hay pila de llamadas ni nada por donde buscar.
¿ Porqué me muestra ese error ?
EDITO
El SPINNER
es una pequeña librería esterna: http://spin.js.org/
Y lo creo como
window.SPINNER = new Spinner( CONFIG.SYSTEM.SPINNER ).spin( document.body );
El SPINNER
en sí funciona bien.
Por si sirve de algo, la pila de llamadas seria:
ready( function( ) {
ajax( URL, function( res ) {
app = new Function( res );
app( );
APP.Run( );
} );
} );
No uso jquery
, pero creo que se entiende.
EDITO 2
Esto es una modificación que he realizado del archivo full.js
:
window.APP = {
SKIN: 'FSKIN',
Run: function( ) {
setTimeout( window.SPINNER.stop.call( window.SPINNER ), 2000 );
}
}
El resultado es el mismo, Uncaught SyntaxError: Unexpected identifier
.
Después, he intentado esto:
window.APP = {
SKIN: 'FSKIN',
Run: function( ) {
setTimeout( function( ) { window.SPINNER.stop( ); }, 2000 );
}
}
¡ Ahora si !
No muestra ningún error, y todo funciona correctamente.
Entiendo que, al hacer setInterval( )
, estoy creando un evento y colocándolo en la cola de eventos del sistema. Para prevenir posibles problemas, utilizo los nombres completamente cualificados de la variable y el método que uso: window.SPINNER.stop( )
.
La pregunta original sigue en pie:
¿ Porqué ocurre esto ? ¿ Cuál es la diferencia entre realizar la llamada al método SPINNER.stop( )
dentro o fuera de una función anónima ?
EDITO 3
Lo que he probado hasta ahora:
setTimeout( window.SPINNER.stop( ), 1000 );
Uncaught SyntaxError: Unexpected identifier
Grave error por mi parte. Los paréntesis, como bien indican OscarGarcia y Guz.
setTimeout( window.SPINNER.stop, 1000 );
No hay error, pero no funciona. El SPINNER
sigue girando.
setTimeout( function( ) { window.SPINNER.stop( ); }, 1000 );
Si funciona. No hay error. Todo OK.
stop
deSPINNER
De hecho, si lo dejas con paréntesis solo se va a ejecutar una vez ya quesetTimeout
acepta una función como primer parámetro y la ejecución de una función no devuelve nada, por ende, el el timeout no cumplirá su cometido.stop
se hace referencia athis
, con la idea que se refiera al objetoSpinner
, pero al colocar el método directamente como callback lo que pasará es quethis
referenciará awindow
en lugar de aSpinner
. Es por eso que si en lugar de pasar directamente el métodostop
lo pones dentro de una función, todo funcionará correctamente. De igual modo funcionará si haces:setInterval(spinner.stop.bind(spinner), 3000);
. Ten cuidado conthis
en JavaScript, éste siempre referenciará alámbito/scope actual
.