Javascript Time Delay to Add and then Remove variables with a set number of iterations

Question

I have overcommitted (based on my current development skill) to deliver to a volunteer group I'm involved with some code that I originally thought was going to be a simple task. In essence, because of COVID, a "raffle drawing" that we used to do in-person is now being done electronically. What I was hoping to do was simulate a "wheel-of-fortune" approach that would pull names from the list of raffle ticket holders into a second list — but only momentarily (300 ms) as a 'visible' teaser — and then remove it and then add another name, again, as a teaser, and so on until a set number of iterations has taken place (let's say 60). I've been successful in getting this to work but the "data removal" setTimeout function is operating in an odd manner. Basically, sometimes one item appears and then disappears but sometimes two items end up on the list before they both disappear. I am trying to make this a 1:1 relationship: one item appears as the previous item disappears.

Am I going about this the wrong way and, if so, what suggestions would you make to set me on the right track? Thank you for any help you can provide. I know this is just a "game" but I've actually learned a lot along the way. Here is my code so far ...

    var iteration = '0';
for (let i=0; i<60; i++) {
        if(iteration == 1) { // Ignore first iteration
            grid_Random.data.removeAll();
        }
        task(i); 
    } 
    
    function task(i) {
        setTimeout(function() {
        console.log(i);
        var item = grid_Names.data.getItem(entry_id);
        grid_Random.data.add(item);
        Entry_id++;
        iteration = '1'; // Sets switch to ignore first iteration
        }, 300 * i); // This 'adds' item to grid (300 *1 adds a delay to each iteration)
    
        setTimeout(function() {
        console.log(i);
        grid_Random.data.removeAll();
        }, 500 * i); // This 'removes' item from grid (500 *1 adds a delay to each iteration)
    } 

Answer 1

theres a nice pen here thats possibly ready to go...

just uncomment line 5 and comment out line 7 to see it in action.... Raffle Draw by Hussain Abbas

Perhaps looking at the implementation of internalcallback and timeouts will help...

a snippet:

$('document').ready(function() {
    rollClick();
});

function rollClick() {
$('#roll').on('click', function(e) {
$(this).hide();

setDeceleratingTimeout(function() { randomName() }, 10, 40);

setTimeout(function() {
  var winner = $('#names').text();
  $('#winner').text(winner);
  $('#names').hide();
  $('#winner').html('<span>And the winner is...</span><br>' + winner);
}, 8000);

e.preventDefault();
});
}