javascript - Refresh timer on self-destruct div setTimeout(function(){...},3000); -

javascript - Refresh timer on self-destruct div setTimeout(function(){...},3000); -

so have fiddle here adds div @ bottom right corner notify user when adds item (click event on item1..item5 divs). div self-destructs (div.remove()) after few seconds.

$(document.body).append(element); //the div created settimeout(function(){ $('#test').remove(); //the div removed }, 3000);

the first problem adding several divs in less 3 seconds result in lot of divs not beingness able see ones underneath. added line on .click() event before doing else happens.

$('#test').remove();

the new/current problem adding several divs in less 3 seconds might result in div appearing sec or less, not beingness able see is. there way prepare this??

you should clear timeout before starting new one, more suggest encapsulating desired behaviour of popup elsewhere it's not tied click function:

function popup() { var timer = null; var $el = $('<div>', { id: 'test', class: 'arrow_box' }).appendto(document.body).hide(); this.show = function (text) { $el.text(text).stop(true, true).show(); cleartimeout(timer); timer = settimeout(function () { $el.hide('slow'); }, 3000); } } var popup = new popup(); $('.item ').on('click', function () { popup.show('you added '+ $(this).text() + '!'); });

note leaving element in dom (but hidden) allows more flexibility animations - e.g. can create popup fadeout instead of blink out of existence.

demo @ http://jsfiddle.net/alnitak/4et4cctr/

javascript jquery html css