Wie kann ich setTimeout ein Verfahren in einem Objekt ausgeführt werden?

Question

Ich möchte ein Pulldown-Menü der Nähe haben, sich auf ein mouseleave Ereignis, nach einer kurzen Verzögerung. Aber ich habe Probleme bekommen es funktioniert.

Beachten Sie die folgenden Methoden in einem Objekt: (Ich bin mit 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);

}

Das funktioniert nicht. Das heißt, this.message up undefined kommt. Nach ein bisschen graben, verstehe ich, warum. :) Die ‚dass‘ Bezugnahme auf Code innerhalb des SetTimeout zum Zeitpunkt der Ausführung nicht verfügbar ist.

Ich frage mich, was ist der „beste“ Weg, um diese Art von Problem zu umgehen? Wie kann ich eine Methode, die verwendet eine andere Methode im gleichen Objekt aufrufen SetTimeout, und haben immer noch Zugang zu den Eigenschaften im Objekt?

Vielen Dank im Voraus für Ihre Hilfe.

Answer 1

Das Problem hierbei ist, dass Sie die CloseMenu Methode von ihrem Objekt sind gelöst wird. Sie würden das gleiche Problem haben, wenn Sie das getan haben:

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

Abnehmen und Aufrufen von Methoden wie diese Mittel, die sie nicht mehr auf die Objekte anwenden sie erstellt wurden. In Ihrem Beispiel tust du fast das gleiche:

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

Ein Update für das erste Verfahren wäre, die call oder apply Methoden zu verwenden:

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

Aber das wäre für einen Timer nicht. Erstellen Sie stattdessen eine anonyme Funktion:

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

---

Es könnte sich auch lohnen zu erwähnen bind() - nicht zu verwechseln mit jQuery $('#selector').bind() werden - ein Verfahren, das um auf verschiedenen Blogs und in einigen Bibliotheken (Prototyp ist das bemerkenswerteste) für eine Weile worden schwebt, und schließlich wurde in ECMAScript Edition 5 .

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

Ich verwende ein ähnliches Verfahren in einer oder zwei Klassen, die ich erstellt, weil es einfacher, nur die Dinge macht.