addClass不setTimeout函數

Question

demo

$('button').on('click',function(){ 
    setTimeout(function(){ 
     $(this).addClass('active'); 
    },500); 
}); 

活動類應該500個ms後加入內工作，但它不添加不改變它的背景色。

Answer 1

this並不是指點擊的按鈕中的setTimeout（）內處理，你可以使用一個簡單的閉包變量來保存對被單擊元素的引用，並在超時處理程序中使用它

$('button').on('click', function() { 
    var $el = $(this); 
    setTimeout(function() { 
     $el.addClass('active'); 
    }, 500); 
}); 

Answer 2

您可以在一個變量保存$(this)，才能在setTimeout函數訪問$(this)：

$('button').on('click',function(){ 
    var $this = $(this); 
    setTimeout(function(){ 
     $this.addClass('active'); 
    },500); 
}); 

Updated Fiddle

Answer 3

使用proxy：

$('button').on('click',function(){ 
    setTimeout($.proxy(function(){ 
     $(this).addClass('active'); 
    },this),500); 
}); 

setTimeout函數中的「這」指的是window對象不是你點擊，但使用代理「這個」定義你點擊按鈕的按鈕。

demo

Answer 4

試試這個：

$('button').on('click',function(){ 
var that = $(this); 
setTimeout(function(){that.addClass('active');},500); 
}); 

Working Fiddle