javascript - binding setTimeOut to some function with specific element -

javascript - binding setTimeOut to some function with specific element -

i trying notification pop up, each pop dynamically generated after ajax fetched data. pop each have time limit of 10seconds before fade out. see on facebook's notifications on left bottom corner. each pop hidden according time added , timelimit.

here's illustration code:

function hidepop(obj){ $(obj).hide(); } function newpopup(data){ $('#notifications').prepend('<li class="new" style="display:none;">'+data+'</li>'); $('.new').fadein(200, function(){ var $this = $(this); $(this).removeclass('new'); settimeout(function(){ hidepop($this) }, 10000); }); }

as can see above, ajax phone call call newpopup data. 1 time fades in settimeout function run. works, however, after few more li appended, new lis maintain hiding 1 time showed. note: remove class new 1 time done since new used latest incoming popups.

i think settimeout either not stopped or targeting of lis.

is method problem or there improve solutions?

instead of prepending <li> tag string states class, selecting class jquery, suggest using dom create <li> element , hold reference so:

function hidepop(obj){ obj.hide(); //obj parameter wrapped jquery, no need 1 time again } function newpopup(data){ var newli = $(document.createelement("li")); //createelement wrap jquery around newli.html(data).css("display", "none"); //jquery set innerhtml , css $('#notifications').prepend(newli); //prepend list newli.fadein(200, function() { //select , li element settimeout(function(){ hidepop(newli); //closure; reference same "this , li" }, 10000); //10s }); }

javascript jquery