jQuery setTimeout - 使用更新數據時不工作

Question

我有一個縮略圖列表。當我點擊縮略圖時，我想在半秒鐘後加載圖像。這是我的代碼：

$('ul#thumbs li img').click(function() { 

    setTimeout(function() { 
     $('img#image').attr("src", $(this).attr("src").replace("_thumb", "")); 
    }, 500); 

}); 

當我點擊其中一個拇指時，什麼也沒有發生。如果我刪除setTimeout函數，並立即加載圖像，它可以正常工作。

有人知道爲什麼事件不會觸發？

Answer 1

this是不是你認爲它是。當您使用setTimeout時，this不再是當函數執行時對當前元素的引用。

你需要確保你保持正確的元素的軌道，就像這樣：

$('ul#thumbs li img').click(function() { 
    var thumbImg = this; 
    setTimeout(function() { 
     $('img#image').attr("src", $(thumbImg).attr("src").replace("_thumb", "")); 
    }, 500); 

}); 

Answer 2

的問題是this在超時功能範圍試試這個：

$('ul#thumbs li img').click(function() { 
    var self = $(this); 
    setTimeout(function() { 
     $('img#image').attr("src", self.attr("src").replace("_thumb", "")); 
    }, 500); 

}); 

或甚至更好：

$('ul#thumbs li img').click(function() { 
    var src = $(this).attr("src").replace("_thumb", ""); 
    setTimeout(function() { 
     $('img#image').attr("src", src); 
    }, 500); 

});