如何让setTimeout在对象中执行方法？

Question

我想在短暂的延迟后，通过mouseleave事件关闭下拉菜单。 但是我很难让它工作。

考虑对象中的以下方法：（我正在使用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);

}

这行不通。 也就是说，this.message出现未定义。 经过一番挖掘，我明白了为什么。 :)'that'引用在执行时不适用于setTimeout内部的代码。

我想知道，解决此类问题的“最佳”方法是什么？ 如何使用setTimeout的方法在同一对象中调用另一个方法，并且仍然可以访问该对象中的属性？

在此先感谢您的帮助。

Answer 1

这里的问题是您要从其对象分离closeMenu方法。 如果这样做，您将遇到同样的问题：

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

这样的分离和调用方法意味着它们不再适用于在其上创建的对象。 在您的示例中，您正在做几乎相同的事情：

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

第一种方法的解决方法是使用call或apply方法：

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

但这对于计时器不起作用。 而是创建一个匿名函数：

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

---

还可能值得一提的是bind() -不要与jQuery的$('#selector').bind()混淆-这种方法在各种博客和某些库中都经常出现（原型是最著名的）现在，终于在ECMAScript第5版中实现了。

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

我在创建的一两个类中使用了类似的方法，因为它使事情变得更容易。