setTimeout（）语法？

Question

我无法让以下setTimeout工作：

$('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中的函数可以正常工作，这样就不会出现问题。我想知道我的语法是否有问题。但是，我发现它没有任何问题。

Answer 1

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

var that = this
setTimeout( function(){
    $(that).parent().parent().css('visibility','hidden');
 },500);

Answer 2

setTimeout()语法不是问题。问题是在函数this中根据函数的调用方式设置，当您通过setTimeout()调用函数时，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++; } ，那么你可以使用jQuery的动画队列来.hide()而不是.delay()：

setTimeout()

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

Answer 3

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); 
    // ...
}

Answer 4

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