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

Question

我制作这个游戏是为了学习目的。

游戏如下:

• There is a chessboard ( this is my grid : array of coordinates )
• And some, let's call them, blobs that are moving randomly on the chessboard.
• When moving, the blobs can duplicate themselves.

我的目标:

是使用循环和逐个移动每个 Blob >setTimeout()。

为什么要设置超时？

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

My problem :

When the blob duplicates, new DOM elements are injected with Jquery on the web page. But, the loop has already finished it's job and because of the setTimeout, the new DOM elements weren't there when the loop assigned new positions to each blob.

The result :

Only the blobs that were there at begining of the game received there new positions.

我的代码示例(简化):

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++;
}

So...:

• Like I said, only the blobs that were initially there when the game started, received new positions.
• Each cycles, the CHARACTERS_LIST[ ] is updated.
• The problem seems to be here : .blob:nth-child(' + (y+1) + ')'), because this element isn't yet created. ( I think... )

我似乎找不到问题所在，但我确信这只是上面代码中的一些小问题!

Answer 1

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