Question

我想创建一个简单的游戏。我试图在几秒钟后递归复制一个div。重复后，它会使用新的唯一ID（ID + i）创建新的div。

这个想法是它不断创建div，用户必须点击它们才能在它达到最大值（游戏结束）之前尽可能地删除它们。

它无法正常等待创建div。我想每隔几秒就从现有的div中创建新的div，但是一旦我运行它就会创建全部15或者只创建1并停在那里。

JSFIDDLE - https://jsfiddle.net/namelesshonor/msrkxq63/

function spawnFly() {
if(x >= 15){
    alert("YOU LOST\n15 Flys have infested your screen!");
}
else if(x < 15) {   
    x++; // adds another fly to the counter 
    setTimeout(duplicate(), 2000); // spawns a new fly after a few secs
    animateDiv(); // animate the spawned fly
    spawnFly(); // called recursively until fly count is met
}   
};

function duplicate() {
var original = document.getElementById('fly'+i);
var clone = original.cloneNode(true);
clone.id = "fly" + i++;
clone.onclick = swat;
original.parentNode.appendChild(clone);
};

function animateDiv(){
var newq = makeNewPosition();
var oldq = $('.shoo').offset();
var speed = calcSpeed([oldq.top, oldq.left], newq);
$('.shoo').animate({ top: newq[0], left: newq[1] }, speed, function(){
  animateDiv();        
});
};

Answer 1

setTimeout的参数应该是指向duplicate的函数指针，而不是调用duplicate函数的结果。

setTimeout(duplicate(), 2000);

应该是

setTimeout(duplicate, 2000);

此外，您可能打算在超时中调用spawnFly函数，而不是重复函数。然后立即调用复制函数到＆＃34; spawn＆＃34;一只新的苍蝇。然后在2秒内，spawnFly函数再次调用duplicate另一个苍蝇和队列spawnFly。你现在设置它的方式，它立即重新进入spawnFly函数，排队15只苍蝇在2秒内产生并立即超过飞行计数（x）

此外，您i的增量导致关闭1错误，以便您始终尝试将下一次飞行的值分配给original。您应该使用预增量（++i）而不是后增量（i++）来获得所需的结果

所有更改都适用： https://jsfiddle.net/msrkxq63/3/

Answer 2

当您在示例中致电setTimeout时，您传递的是duplicate()的结果，而不是函数duplicate本身作为回调。由于重复不会返回任何内容，setTimeout会尝试调用函数undefined。您可以这样调用它（作为匿名回调）：

setTimeout(function() { duplicate }, 2000)

或简单地说，

setTimeout(duplicate, 2000)

Answer 3

如果您注意到 duplicate() 中的 setTimeout(duplicate(),2000);，
这是一个函数调用。
setTimeout 的第一个参数是一个函数。如果您通过了 duplicate()，
它在等待之前被评估并寻找返回值并调用它。
函数与否，它在函数调用之后等待，并在等待之后什么都不做。所以我们可以说流程是：
1。回调 = duplicate()（duplicate 在等待之前被调用） = <返回值 duplicate> 而不是函数 {{1 }} 本身。
2.毫秒 = duplicate。
3. 2 秒后调用返回值。
正确的代码是：
2000

为什么setTimeout没有等待调用函数？

3 个答案: