jquery - Can't get javascript text effect to work properly with delay -

i'm trying make random text effect kinda 1 @ end of movie war games (matthew broderick). idea have individual letters change randomly when ever user hovers on 1 of letters in word. after short time letter end being "decoded" meaning end on right letter or number. have built basic effect part struggling setting timer. want create small delay between hover-out event , actual display of decoded character. when add settimeout however. script breaks , seems stack timers. i'm not sure i'm doing wrong. below code i've got far.. great.

function setdecodedchar(object){     var decodedmessage = "hello world";     var index = object.attr('class').substring(4);     console.log(index);     object.html(decodedmessage[index]);   }  function changechar(object){     var randomchar = getrandomchar();     object.html(randomchar); }  function getrandomchar(){     var char = "";     var possible = "abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz0123456789";     char = possible.charat(math.floor(math.random() * possible.length));     return char; }  $(function() {     typesetting.letters('.title-text');      var target = $(".title-text").children();     console.log(target);      var timer;     var gate = true;      $(target).hover(function(){             var charchar = $(this);             //on hover-over             if(gate){                 gate = false;                 timer=setinterval(function(){                     changechar(charchar);                 },100);             }         },function(){             //on hover-out             settimeout(function(){ //<-- breaks here                                 clearinterval(timer)                  setdecodedchar($(this));                             },1000);             gate = true;         }     );  }); 

here jsfiddle of effect have working. http://jsfiddle.net/thesnooker/htss3/

i idea, , worked on it. got working.

first, here fiddle : http://jsfiddle.net/htss3/2/

i must say, don't know if optimal way, still working!

the problem method have 1 timer every character, override themselves, letters wont stop.

how solve it:

i set timer in data of every letter :

$(this).data('timer', setinterval(function () {     changechar(charchar); }, 100)); 

not every span have own timer.

on hover out, ad save $(this) reference `var since lost in timeout. alos saved timeout data stop when hover , it's still changing. :

var $this = $(this); $this.data('timeout', settimeout(function(){     clearinterval($this.data('timer'));     setdecodedchar($this); },1000)) 

and finally, on hover, had clear timeout , interval:

clearinterval($(this).data('timer')); cleartimeout($(this).data('timeout')); 

well, find hard explain in own word, take @ code , enjoy!