jQuery setTimeout - 데이터 업데이트에 사용할 때 작동하지 않습니다.

Question

미리보기 이미지 목록이 있습니다. 미리보기 이미지를 클릭하면 이미지가 0.5 초 후에로드됩니다. 여기 내 코드 :

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

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

}); 

엄지 손가락 중 하나를 클릭해도 아무런 변화가 없습니다. setTimeout 함수를 제거하고 이미지를 즉시로드하면 제대로 작동합니다.

아무도 왜 이벤트가 발생하지 않을지 알고 있습니까?

Answer 1

은 귀하가 생각하는 것과 다릅니다. 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); 

});