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

我在做这个游戏，比方说，是为了学习

游戏如下所示：

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

我的目标：

是使用循环和设置超时（）逐个移动每个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重复时，新的DOM元素将在网页上注入Jquery但是，循环已经完成了它的工作，由于setTimeout，当循环为每个blob分配新位置时，新的DOM元素不在那里

结果：

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

只有在比赛开始时出现的斑点获得了新的位置

我的代码示例（简化）：

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

for（var cycles=1；cycles字符类型
{   
如果（字符列表[t]。长度！=0）
{
对于（var i=0；i索引
{
//移动棋盘上的斑点
//
// ***********************************************
移动字符（t，i）；
}
}
}
}
//********************************************************************
var循环=1；
函数移动字符（t，i）{
字符列表[x][y].MoveAndDuplicate（）；//如果Math.ramdon成功，则重复
LOG.characterHistory（）；//LOG/LOG.js
setTimeout（函数（x，y）{return function（）{
如果（！CHARACTERS_LIST[x][y].isBorn）{
如果（x==0）{
$（'#blue blob.blob:n个子（'+（y+1）+'））.css({
'top'：字符列表[x][y]。posY+'em'，
“左”：字符列表[x][y]。posX+'em'
});
}else如果（x==1）{
$（'#green blob.blob:n个子（'+（y+1）+'））.css({
'top'：字符列表[x][y]。posY+'em'，
“左”：字符列表[x][y]。posX+'em'
});
}else如果（x==2）{
$（'#red blob.blob:n个子（'+（y+1）+'））.css({
'top'：字符列表[x][y]。posY+'em'，
“左”：字符列表[x][y]。posX+'em'
});
}如果（x==3）{
$（'#特殊blob.blob:n个子（'+（y+1）+'））.css({
'top'：字符列表[x][y]。posY+'em'，
“左”：字符列表[x][y]。posX+'em'
});
}
}否则{
字符列表[x][y].isBorn=false；
var _blob，_inner；
_blob=document.createElement（'div'）；
_blob.className=“blob”；
_内部=document.createElement（'div'）；
_inner.className=“inner”；
_blob.appendChild（_-inner）；
if（字符\u列表[x][y]BlueBlob实例）{
_inner.style=“背景色：#52DE71；”；
_blob.style=“top:+字符列表[x][y].posY+“em；”
+“左：”+字符列表[x][y]。posX+“em；”；
$（'#blue blob'）。追加（_blob）；
}else if（字符列表[x][y]GreenBlob实例）{
_inner.style=“背景色：#5299DE；”；
_blob.style=“top:+字符列表[x][y].posY+“em；”
+“左：”+字符列表[x][y]。posX+“em；”；
$（'#绿色blob'）。追加（_blob）；
}
}
}}（t，i），100*圈）；
loop++；
}

所以…：

• 正如我所说，只有比赛开始时出现的水滴才会获得新的位置
• 每次循环，都会更新字符列表[]
• 问题似乎在这里：.blob:n子元素（“+（y+1）+”），因为此元素尚未创建。（我想……）

---

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

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

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

moveandduplicate

做什么？您可以尝试在超时之外调用它。我编辑了我的代码，并调用了

moveanddupate（）

ouside setTimeout函数。我还在

MoveCharacter

（在

moveandreplicate（）

中）的末尾添加了一组代码，并将问题缩小了一点。现在，我遇到了另一个问题，所有的blob都从第一个位置移动到最后一个位置（好像所有设置超时都同时触发），但新生成的blob随后会弹出（好像setTimeout起作用一样）moveAndDuplicate做什么？你可以尝试在超时之外调用它。我编辑了我的代码，调用了setTimeout函数之外的moveAndDuplicate（）。我还在

MoveCharacter

的末尾添加了一组代码（在

moveAndDuplicate（）

的内部）缩小了范围