Multiple setTimeout functions but that goes off with different times

Multiple setTimeout functions but that goes off with different times

  1. switch (e.keyCode) { case 32: $("#Main").prepend('<div class="Bomb" style="absolute; top:' + position.top + 'px; left: '+ position.left +'px;"></div>'); setTimeout( function(){ var BombPos = $('.Bomb').position(); var BombPosTopb = BombPos.top; var BombPosLeftb = BombPos.left; var BombPosTopt = BombPos.top; var BombPosLeftt = BombPos.left; var BombPosTopl = BombPos.top; var BombPosLeftl = BombPos.left; var BombPosTopr = BombPos.top; var BombPosLeftr = BombPos.left; $(this).remove(); .... More stuff if (CheckRight == false){ $("#Main").prepend('<div class="Effect" style="absolute; top:' + BombPosTopr + 'px; left: '+ BombPosLeftr +'px;"></div>'); BombPosLeftr += 30; } }; setTimeout( function(){ $('.Effect').remove(); } , 1000 ); } , 1500 );


My project is called Bomberman and I am trying to spawn multiple Bombs. The problem with this code: I spawn the object, it works & it goes awey without any problem.

But when I click multiple times my spacebar and put more than 1 bomb they all disappear at the same time.

I just want them to have a 'seperate timer' on each of my litle bombs so they go awey after 1-2 seconds when I click on the spacebar and not all at once.