¿Cómo puedo tener setTimeout ejecutar un método en un objeto?

Question

Me gustaría tener un menú desplegable en sí cerca de un acontecimiento mouseleave, después de un breve retraso. Pero estoy teniendo problemas para conseguir que funcione.

Considere los métodos siguientes en un objeto: (estoy usando jQuery)

myObj = {};

myObj.message = "woot!";

myObj.bindEvents = function() {

        var that = this;

        $("#menuPanel")
            .bind("mouseleave", function() { 

                    that.timer = setTimeout(that.closeMenu,500); 

            });

    }

myObj.closeMenu = function() {

     // close the menu

     alert(this.message);

}

Esto no funciona. Es decir, this.message viene definido. Después de un poco de excavación, entiendo por qué. :) El 'que' de referencia no está disponible para código dentro de setTimeout en el momento de la ejecución.

Me pregunto, ¿cuál es la "mejor" manera de solucionar este tipo de problema? ¿Cómo puedo tener un método que utiliza SetTimeOut llamar a otro método en el mismo objeto, y aún así tener acceso a las propiedades del objeto?

Gracias de antemano por su ayuda.

Answer 1

El problema aquí es que se está separando el método closeMenu de ella del objeto. Usted tendría el mismo problema si usted hizo esto:

var closeMenu = myObj.closeMenu;  // detaching the method from the object
closeMenu();

Extracción y métodos de llamada como esto significa que ya no se aplican a los objetos que se crearon sucesivamente. En su ejemplo, que estás haciendo casi lo mismo:

// Setting the first parameter of setTimeout to be the detached closeMenu method
that.timer = setTimeout(that.closeMenu,500); 

Una solución para el primer método sería el uso de los métodos call o apply:

var closeMenu = myObj.closeMenu;  // detaching the method from the object
closeMenu.apply(myObj);

Pero eso no funcionaría para un temporizador. En su lugar, crear una función anónima:

that.timer = setTimeout(function () { that.closeMenu(); },500); 

---

También podría valer la pena mencionar bind() - no debe confundirse con $('#selector').bind() de jQuery - un método que ha estado flotando alrededor en varios blogs y en algunas bibliotecas (Prototipo siendo el más notable) desde hace un tiempo, y finalmente se ha implementado en edición ECMAScript 5 .

that.timer = setTimeout(that.closeMenu.bind(that),500);

Yo uso un método similar en una o dos clases que he creado, ya que sólo hace las cosas más fáciles.