setTimeout y «este» en JavaScript

Tengo un método que utiliza el setTimeout función y hace una llamada a otro método. En la carga inicial de método 2 funciona bien. Sin embargo, después de que el tiempo de espera, me sale un error que dice method2 es indefinido. ¿Qué estoy haciendo mal aquí?

ex:

test.prototype.method = function()
{
    //method2 returns image based on the id passed
    this.method2('useSomeElement').src = "http://www.some.url";
    timeDelay = window.setTimeout(this.method, 5000);
};

test.prototype.method2 = function(name) {
    for (var i = 0; i < document.images.length; i++) {
        if (document.images[i].id.indexOf(name) > 1) {
            return document.images[i];
        }
    }
};

Sólo para asegurarse de que: es «finction» sólo un error en la pregunta, o es que en el código también?
por favor, añadir a la definición y alcance de method2
Lo siento, es un error de la
prueba.el prototipo.method2 = function(nombre) { for (var i = 0; i < documento.imágenes.longitud; i++) { if (document.images[i].id.indexOf(nombre) > 1) { return documento.images[i]; } } }; Espero que esto ayude
Gracias crescentfresh, lo siento, no tenía la intención de eliminar esa «T»
ESTA en javascript se explica aquí scotch.io/@alZami/understanding-this-in-javascript
Posibles duplicados de Cómo acceder a la correcta `esta` dentro de una devolución de llamada?

InformationsquelleAutor |

5 Comentarios

47

El problema es que setTimeout() causas de javascript para utilizar en el ámbito global. Esencialmente, usted está llamando a la method() clase, pero no de this. En lugar de sólo estás diciendo setTimeout utilizar la función method, con ningún ámbito concreto.

Para solucionar esto puedes envolver la llamada a la función en otra función llamada que hace referencia a las variables correctas. Se verá algo como esto:
```
test.protoype.method = function()
{
    var that = this;

    //method2 returns image based on the id passed
    this.method2('useSomeElement').src = "http://www.some.url";

    var callMethod = function()
    {
        that.method();
    }

    timeDelay = window.setTimeout(callMethod, 5000);
};
```
that puede ser this porque callMethod() es en el método de su ámbito.

Este problema se vuelve más complejo cuando usted necesita para pasar parámetros a la setTimeout método, como en IE no soporta más de dos parámetros para setTimeout. En el caso de que usted necesita para leer sobre cierres.

También, como una nota al margen, te estás preparando para un bucle infinito, ya que method() siempre llama method().
- Esto se ve promosing. Voy a probarlo y hacerle saber
- Hola, Esto funciona en mozilla bu no en ie! alguna pista? también imágenes no bucle, se detiene una vez que se alcanza la última imagen
- eres un asistente.
- Lo que un excelente artículo sobre los cierres con ejemplos prácticos en su enlace! Gracias!
InformationsquelleAutor

Más elegante opción para anexar .bind(this) hasta el final de su función. E. g.:

    setTimeout(function() {
        this.foo();
    }.bind(this), 1000);
//  ^^^^^^^^^^^ <- fix context

Así que la respuesta a la OP de la pregunta podría ser:

    test.prototype.method = function()
    {
        //method2 returns image based on the id passed
        this.method2('useSomeElement').src = "http://www.some.url";
        timeDelay = window.setTimeout(this.method.bind(this), 5000);
        //                                      ^^^^^^^^^^^ <- fix context
    };

círculo obtiene la plaza!

InformationsquelleAutor

8

la this utilizado en setTimeOut alcance es a través de sí mismo. Crear un var "foo = this;" en el interior de su test.prototype.method función y uso foo lugar.

InformationsquelleAutor

en es6 usted puede hacer esto de esta

window.setTimeout(() => {
    this.foo();
}, 1000);

InformationsquelleAutor

0

Me sale un error que dice method2 es indefinido

Sí, al cortar el this.method de su propietario y pasar a la función sólo para setTimeout, se pierde la asociación que establece this, así this en method() es igual a la de objeto global window.

Ver esta respuesta para una explicación de la manera sorprendente this realmente funciona en JavaScript.

InformationsquelleAutor

5 Comentarios

Dejar respuesta Cancelar respuesta