jQuery - 插件中带有 $(this) 的 setTimeout 函数

Question

我的问题在某种程度上与问题here相关。 。我正在尝试制作一个插件，它显示一条消息，然后将其淡出。

这是插件:

(function($) {
$.fn.showWarning = function(msg) {
    return this.each(function() {
        $(this).text(msg).show().hide(); // <-preloads message
        $(this).fadeIn('fast', function() {
            $(this).stop().text(msg);
            setTimeout(function() {
                $(this).fadeOut(300);
            }, 2500);
        });
    });
};
})(jQuery);

整个代码在这里:http://jsfiddle.net/e5kns/6/

问题是消息没有消失，所以我认为它与setTimeout有关。也许 $(this) 没有引用它应该引用的地方？

Firebug给出:

a.ownerDocument 未定义

和Chrome:

未捕获类型错误:无法读取未定义的属性“defaultView”

Answer 1

你可以

$(this).stop().text(msg).delay(2500).fadeOut(300)

<小时/>事实上， this 没有引用 window 以外的任何内容。因为浏览器正在调用超时回调，并将 this 设置为 window。 this 仅基于函数的调用方式。

setTimeout($.proxy(function() {
    $(this).fadeOut(300);
}, this), 2500);

会修复这个问题，因为它会生成另一个函数，该函数会丢弃 this 并使用提供的 this 并将其显式应用到您的原始函数。