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

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

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

$(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);