0

我无法让以下 setTimeouts 工作： 

$('a').click(function(){
    if( last ) {
        if( ($(this).attr('id') == last.attr('id')) ) {
            setTimeout( function(){ 
                $(this).parent().parent().css('visibility','hidden'); 
            },500); 
            setTimeout( function(){ 
                last.parent().parent().css('visibility','hidden'); 
            },500); 
            found++; 
        } 
        if (found == 3) { 
            alert('You won a sticker!'); 
            window.location.href = "#play2"; 
            location.reload(); //resets found to 0 
        } last = null; 
    } 
    else { 
        last = $(this) 
    } 
});

setTimeout 中的函数可以正常工作，因此它不是问题。我想知道我的语法是否有问题。但是，我找不到任何问题。

4

4 回答 4

3

在第一个setTimeout this === window. 您可能想要创建一个闭包

var that = this
setTimeout( function(){
    $(that).parent().parent().css('visibility','hidden');
 },500);
于 2012-07-09T00:34:41.137 回答
1

这不是setTimeout()语法问题。问题在于，在函数this内设置取决于该函数的调用方式，并且当您通过setTimeout()then调用函数时，this不再是单击事件中的 DOM 元素。您可以在传递给的函数之外保留对它的引用setTimeout()，这也可以节省您选择$(this)两次（如果您在函数和if语句中都使用保存的引用）。我看不出第二个有什么问题，setTimeout()因为它已经使用了函数外部的引用。

    var $this = $(this);
    if( ($this.attr('id') == last.attr('id')) ) {
        setTimeout( function(){ 
            $this.parent().parent().css('visibility','hidden'); 
        },500); 
        setTimeout( function(){ 
            last.parent().parent().css('visibility','hidden'); 
        },500); 
        found++; 
    }

或者，如果你使用.hide()那么你可以使用 jQuery 的动画队列来.delay()代替setTimeout()：

    $(this).parent().parent().delay(500).hide(1);

使代码更整洁，但.hide()会设置display:none而不是visibility:hidden，我承认这可能不是你想要的（你不能使用.delay()with.css()因为.css()不是动画方法）。

于 2012-07-09T00:55:23.690 回答
1

this处理程序内部的值click是对被单击元素的引用。this回调内部的值setTimeout是全局window对象。关键是函数内部的值this是上下文相关的（即它取决于函数的调用方式）。

您需要保存this对外部范围的值的引用，以便您可以在内部范围内使用它：

if ($(this).attr('id') == last.attr('id')) {
    var that = $(this);
    setTimeout( function() { 
        that.parent().parent().css('visibility','hidden'); 
    },500); 
    // ...
}
于 2012-07-09T00:55:54.167 回答
0

使用 jQuery 习语：

setTimeout(jQuery.proxy(function(){
  $(this).parent().parent().css('visibility','hidden');
}, this), 500);

标准 JavaScript：

setTimeout(function(){
  $(this).parent().parent().css('visibility','hidden');
}.bind(this), 500);
于 2012-09-14T19:00:43.817 回答