使用 setTimeout 操作通过循环生成的新 DOM 元素

Question

我正在制作这个，比如说，用于学习目的的游戏。

游戏如下：

• 有一个棋盘（这是我的网格：坐标数组）
• 我们称它们为 blob，它们在棋盘上随机移动。
• 移动时，blob 可以复制自己。

我的目标：

是使用 loop 和 blob >setTimeout().

为什么要设置超时？

因为我不希望他们在棋盘上同时移动 :)

我的问题：

当 blob 复制 时，新的 DOM 元素会在网页上使用 Jquery 注入。 但是，循环已经完成了它的工作并且因为setTimeout em>，当循环为每个 blob 分配新位置时，新的 DOM 元素并不存在。

结果：

只有在游戏开始时存在的 blob获得了新位置。

我的代码示例（简化）：

for (var cycles = 1; cycles <= this.cycles + 1; cycles ++) 
{           
    for (var t = 0; t < CHARACTERS_LIST.length; t++)    // t => Character Type
    {   
        if (CHARACTERS_LIST[t].length != 0) 
        {
            for (var i = 0; i < CHARACTERS_LIST[t].length; i++)     // i => Index
            {
                    // Moves the blob on the chessboard
                    //
                    // ***********************************************

                    MoveCharacter(t, i);                
            }
        }
    }
}

//********************************************************************

var loop = 1;

function MoveCharacter(t, i){
    CHARACTERS_LIST[x][y].moveAndDupicate();    // Duplicates if Math.ramdon succeeds
    LOG.characterHistory();         // Log/Log.js

    setTimeout( function(x, y) { return function() { 
        if (!CHARACTERS_LIST[x][y].isBorn) {
            if (x == 0) {

                $('#blue-blob .blob:nth-child(' + (y+1) + ')').css({
                    'top'  : CHARACTERS_LIST[x][y].posY + 'em',
                    'left' : CHARACTERS_LIST[x][y].posX + 'em'
                });

            } else if (x == 1) {

                $('#green-blob .blob:nth-child(' + (y+1) + ')').css({
                    'top'  : CHARACTERS_LIST[x][y].posY + 'em',
                    'left' : CHARACTERS_LIST[x][y].posX + 'em'
                });

                } else if (x == 2) {

                    $('#red-blob .blob:nth-child(' + (y+1) + ')').css({
                        'top'  : CHARACTERS_LIST[x][y].posY + 'em',
                        'left' : CHARACTERS_LIST[x][y].posX + 'em'
                    });

            } else if (x == 3) { 

                $('#special-blob .blob:nth-child(' + (y+1) + ')').css({
                    'top'  : CHARACTERS_LIST[x][y].posY + 'em',
                    'left' : CHARACTERS_LIST[x][y].posX + 'em'
                });
            }
        } else {

            CHARACTERS_LIST[x][y].isBorn = false;

            var _blob, _inner;
            _blob  = document.createElement('div');
            _blob.className  = "blob";
            _inner = document.createElement('div');             
            _inner.className = "inner";
            _blob.appendChild(_inner);

            if(CHARACTERS_LIST[x][y] instanceof BlueBlob){
                _inner.style = "background-color:#52DE71;";
                _blob.style  = "top:"  + CHARACTERS_LIST[x][y].posY + "em;"
                             + "left:" + CHARACTERS_LIST[x][y].posX + "em;";
                $('#blue-blob').append(_blob);
            } else if (CHARACTERS_LIST[x][y] instanceof GreenBlob){
                _inner.style = "background-color:#5299DE;";
                _blob.style  = "top:"  + CHARACTERS_LIST[x][y].posY + "em;"
                             + "left:" + CHARACTERS_LIST[x][y].posX + "em;";
                $('#green-blob').append(_blob);
            }
        }
    }}(t, i), 100*loop);

    loop++;
}

所以...：

• 就像我说的，只有在游戏开始时最初存在的 blob 获得了新位置。
• 每 周期，CHARACTERS_LIST[ ] 都会更新。
• 问题似乎在这里：.blob:nth-child(' + (y+1) + ')')，因为这个元素不是尚未创建。 （我认为...）

我似乎找不到问题，但我确定这只是上面代码中的一些小问题！

Answer 1

问题是我试图使用 DOM 元素和 Jquery 来实现所有这些（效率不高）。我使用了 html 画布，一切正常。