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