javascript - jQuery 插件无法正常工作

Question

我正在开发一个名为“popup”（$(".messageBox").popup()）的插件。

这是我的代码的一部分：

$(this).fadeIn(settings.fadeDuration);
    console.log($(this).attr("class"));

    console.log(settings.timeOut);
    setTimeout( function(){
        console.log($(this).attr("class"));
        $(this).fadeOut(settings.fadeDuration);
}, settings.timeOut);

那是中的代码popup.min.js，现在下面是中的代码index.html：

$(function(){
    $(".messageBox").popup();
});

我的弹出窗口出现，并正确淡入，但它不会淡出，1000ms因为它应该......我该怎么办？我打开了控制台，但没有显示错误。

Answer 1

因为回调方法this内部的引用是错误的setTimeout

您可以使用闭包变量来保存引用

$(this).fadeIn(settings.fadeDuration);
console.log($(this).attr("class"));

console.log(settings.timeOut);
var el = this;
setTimeout( function(){
    console.log($(el).attr("class"));
    $(el).fadeOut(settings.fadeDuration);
}, settings.timeOut);

或使用$.proxy()将自定义上下文传递给回调

$(this).fadeIn(settings.fadeDuration);
console.log($(this).attr("class"));

console.log(settings.timeOut);
setTimeout($.proxy(function(){
    console.log($(this).attr("class"));
    $(this).fadeOut(settings.fadeDuration);
}, this), settings.timeOut);