Jquery - O que há de errado com o $(this) ?

Olá amigos tudo bem? Hoje vou falar sobre um erro clássico de Javascript que os desenvolvedores WEB não percebem mas que atrapalhar legal!...

O que há de errado com o $(this) ?

Você tem um manipulador de evento que adiciona uma classe a um elemento DOM, espera um segundo usando setTimeout() e, em seguida, remove essa classe veja o script:

1. // Exemplo do uso do this na jquery
2. $(document).ready(function(){
3.     $('.elemento').click(function(){
4.     $(this).addClass('clicado');
5.     setTimeout( function(){
6.     $(this).removeClass('clicado');
7. }, 1000);
8.  });
9. });

A classe é adicionada quando você clica isso é lógico, mas nunca é removida (ué não era para ser?).

SÉRIO?
SIMMMMM


Você confirmou que o código dentro de setTimeout() está sendo chamado, mas ele não faz nada.
Presta atenção, você já usou o removeClass() antes e confirmou que o código está correto ou seja esse método ai FUNUNNCIAAA meu =[ então qual é o problema?? 


Você está usando $(this) da mesma forma em ambos os lugares, mas ele parece não funcionar dentro da chamada a setTimeout()...


Justamente ele não vai funcionar, pois o $(this) agora não faz mais sentido... afinal... this oq ?


Mas e ai? Como eu resolvo essa JÓÇA?


Solução:
Salve this em uma variável antes de chamar setTimeout();  tipo assim:
 " var $elemento = $(this) "


Mas e ai pq isso acontece? O que é o $(this), e por que ele nem sempre funciona?


Fica mais fácil entender se separarmos em duas partes, $() e this.


O $() parece misterioso, mas não é: trata-se apenas de uma chamada de função. o $ é uma referência para a função Jquery; então, $() é simplesmente um caminho mais curto de se escrever Jquery(). É apenas uma chamada normal de função Javascript que acontece para retornar um objeto.


Bem pessoal... valeu pela atenção e até a próxima.