Javascript 添加和删除具有设定迭代次数的变量的时间延迟

Question

我已经过度投入（根据我目前的开发技能）交付给一个志愿者小组我参与了一些我原先认为将是一项简单任务的代码。从本质上讲，由于 COVID，我们过去亲自进行的“抽奖”现在以电子方式进行。我希望做的是模拟一种“命运之轮”方法，将抽奖券持有者名单中的名字拉到第二个名单中——但只是暂时（300 毫秒）作为 'visible' 预告片——和然后删除它，然后再次添加另一个名称作为预告片，依此类推，直到发生一定数量的迭代（比如 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)
    }

Answer 1

这里有一支不错的笔，可能已经准备好了...

只需取消第 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 添加和删除具有设定迭代次数的变量的时间延迟

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

javascript

settimeout