使用设置的迭代次数添加和删除变量的Javascript时间延迟

问题描述

（根据我目前的开发技能）我过度致力于将自己参与的一些代码交付给志愿者小组，这些代码原本以为是一件简单的任务。从本质上讲，由于使用了COVID，因此我们过去以电子方式制作的“抽奖图”现在正在以电子方式完成。我希望做的是模拟一种“命运之轮”的方法，该方法会将抽奖券持有者列表中的名字拉到第二个列表中，但作为“可见”预告片只是短暂（300毫秒），然后删除它，然后再次添加另一个名称作为预告片，依此类推，直到发生了一定数量的迭代（例如60）。我已经成功地使它起作用，但是“数据删除” setTimeout函数以一种奇怪的方式运行。基本上，有时一项出现然后消失，但有时两项最终消失在列表上。我正在尝试使这种关系成为1：1的关系：前一项消失时，一项出现。

我会以错误的方式走这条路吗？如果是的话，您会提出什么建议使我走上正确的道路？感谢您提供任何帮助。我知道这只是一个“游戏”，但实际上我在此过程中学到了很多东西。到目前为止，这是我的代码...

    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)
    }

解决方法

在这里用一支漂亮的笔可能已经准备好去...

只需取消注释第5行并注释掉第7行即可看到它的作用...。 Raffle Draw by Hussain Abbas

也许看一下内部回调和超时的实现会有所帮助...

摘要：

$('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();
});
}

javascript settimeout