Pfthb

I'm developing an effect where symbols would change when user hovers on them.

I've achieved part of it - elements change on hover as they should. What I can not manage to achieve is for symbols to keep changing for few seconds after element is not hovered anymore and only then stop instead of stopping immediately.

Full fiddle: https://jsfiddle.net/wehvm457/3/

Javascript:

var
 target = $(".symbol").find('span'),
 possible = ['?', '/', '<', '>', '', '{', ')', '(', '[', '[', '!', '2', '3', '1', '4', '5', '6', '7', '&', '$', '#'];

var pickRandom = function(element) 
 random = Math.floor(Math.random()*possible.length);
 symbol = possible[random];
 currentTarget.html(symbol);
 

$(target).on(
mouseenter: function () 
 currentTarget = $(this);
 changeSymbols = setInterval(pickRandom, 100);
,

mouseleave: function () 
 // currentTarget = $(this);
 // setTimeout(function()
 clearInterval(changeSymbols);
 // , 1000)

);

Would appreciate any help. Thanks in advance!

You need to be able to store instance specific references to setInterval instead of using the global changeSymbols. You can do this by storing each reference on the element itself using data()

Similarly the currentTarget won't work when you have multiple instances running so need to use the element argument of pickRandom instead and call that function passing in the element

var pickRandom = function($el) 
 random = Math.floor(Math.random() * possible.length);
 symbol = possible[random];
 $el.html(symbol);


$(target).on(
 mouseenter: function() 
 var $el = $(this);
 var timer = setInterval(function() 
 pickRandom($el)
 , 100);

 $el.data('timer', timer)
 ,

 mouseleave: function() 
 var timer = $(this).data('timer')
 setTimeout(function() 
 clearInterval(timer);
 , 1000)
 
);

Updated Fiddle demo