2

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.

16
  • 1
    Creo que OscarGarcía se refiere a la función stop de SPINNER De hecho, si lo dejas con paréntesis solo se va a ejecutar una vez ya que setTimeout 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.
    – gugadev
    Commented el 15 feb. 2017 a las 18:55
  • 1
    Exacto, sólo se ejecutará en el momento de hacer la llamada.. esa era mi teoría. Lo de la función anónima debiste decirlo antes ya que el código que usas no lo es. PD: acabo de fijarme que editaste la pregunta y lo añadiste. En cuanto pueda te explico la diferencia en una respuesta Commented el 15 feb. 2017 a las 18:59
  • 1
    El error se debe a que dentro del método stop se hace referencia a this, con la idea que se refiera al objeto Spinner, pero al colocar el método directamente como callback lo que pasará es que this referenciará a window en lugar de a Spinner. Es por eso que si en lugar de pasar directamente el método stop lo pones dentro de una función, todo funcionará correctamente. De igual modo funcionará si haces: setInterval(spinner.stop.bind(spinner), 3000);. Ten cuidado con this en JavaScript, éste siempre referenciará al ámbito/scope actual.
    – gugadev
    Commented el 15 feb. 2017 a las 19:20
  • 1
    Bueno, nada.. un rato de redacción perdido.. :/ voy a dar el +1 que se lo merece xD Commented el 15 feb. 2017 a las 19:48
  • 2
    @OscarGarcia se te adelantó. Esto es la ley del Viejo Oeste. El más rápido, gana ;-) Ya haré mas preguntas, estoy empezando con esto del JavaScript, así que alguna saldra seguro.
    – Trauma
    Commented el 15 feb. 2017 a las 19:50

1 respuesta 1

3

Nota: No debes ejecutar una función si la pasas como callback De hecho, si lo dejas con paréntesis (ejecución) solo se va a ejecutar una vez ya que setTimeout acepta una función como primer parámetro y la ejecución de una función no devuelve nada (undefined); por ende, el el timeout no cumplirá su cometido.

Problema

El error es referente a ámbitos de alcance o scopes. Estás pasando la referencia de la función stop como callback sin establecer el scope al que debe referenciar stop.

Cuando haces:

window.setInterval(SPINNER.stop, 3000);

El ámbito de alcance de stop será el global, es decir window. ¿Por qué? La razón es sencilla:

En JavaScript el ámbito de this siempre será en donde se ejecute.

Por ende, ya que el ámbito de setTimeout es window, entonces el ámbito de stop será también window.

Solución

La solución es sencilla, puedes hacerlo de dos formas:

  • Pasando un closure como callback a setInterval y ejecutando en ella stop.

    setInterval(function () { SPINNER.stop(); }, 3000);
    
  • Estableciendo el ámbito del método stop por medio de bind.

    setInterval(SPINNER.stop.bind(SPINNER), 3000);
    

Al usar bind se creará una nueva función reemplazando el ámbito por el pasado por parámetro.


Elijas la forma que elijas, funcionará correctamente.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.