为什么setTimeout等待调用函数？ [英] Why doesn't setTimeout wait to call a function?

问题描述

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

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

它不会正确地等待创建div。我想每隔几秒钟从现有的创建一个新的div，但它会在我运行它时立即创建所有15个，或者只创建1个并停在那里。

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

  function spawnFly（）{
 if（x> = 15）{
 alert（YOU LOST \\\
15苍蝇侵染了你的屏幕！）; 
} 
 else if（x <15）{
 x ++; //添加另一个飞到计数器
 setTimeout（duplicate（），2000）; //几秒后产生一个新的飞行
 animateDiv（）; //动画产生的苍蝇
 spawnFly（）; //递归调用，直到满足飞行计数
} 
}; 
 
函数duplicate（）{
 var original = document.getElementById（'fly'+ i）; 
 var clone = original.cloneNode（true）; 
 clone.id =fly+ i ++; 
 clone.onclick = swat; 
 original.parentNode.appendChild（clone）; 
}; 
 
函数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（）; 
}） ; 
}; 
  

解决方案

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

  setTimeout（duplicate（），2000）; 
  

应该是

  setTimeout（duplicate，2000）; 
  

另外，您可能打算调用 spawnFly 超时函数，而不是重复函数。然后会立即调用重复函数以产生新的飞行。然后在2秒内， spawnFly 函数被调用到 duplicate 另一个飞行和队列 spawnFly 。现在它已经建立起来了，它会立即重新生成spawnFly函数，排队15次苍蝇在2秒内产生并立即将飞行计数（ x ）填满

另外，您的增量 i 会导致1错误，因此您总是尝试将下一次飞行的值分配给原始。您应该使用前增量（ ++ i ）而不是后增值（ i ++ ）来获得您想要的结果

应用的所有更改：
https：/ /jsfiddle.net/msrkxq63/3/

I want to create a simple game of sorts. I am trying to duplicate a div recursively after a few seconds. After duplicated, it creates the new div with a new unique ID (ID+i).

The idea is that it keeps creating divs and the user has to click on them to remove them for as long as they can before it reaches the max (game over).

It won't properly wait to create the divs. I want to create new divs from the existing one every few seconds, but it either creates all 15 as soon as I run it or it only creates 1 and stops there.

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();        
});
};

解决方案

The argument to setTimeout should be the function pointer to duplicate, not the result of calling the duplicate function.

setTimeout(duplicate(), 2000);

should be

setTimeout(duplicate, 2000);

Also, you might be intending to call the spawnFly function in the timeout, not the duplicate function. The duplicate function would then be called immediately to "spawn" a new fly. Then in 2 seconds, the spawnFly function is called to duplicate another fly and queue spawnFly again. The way you currently have it set up, the it immediately recurs into the spawnFly function, queuing up 15 flies to spawn in 2 seconds and immediately topping out the fly count (x)

Also, you're your increment of i causes an off by 1 error such that you're always trying to assign the value of the next fly to original. You should use pre-increment (++i) instead of post-increment (i++) to get your desired result

All changes applied: https://jsfiddle.net/msrkxq63/3/

这篇关于为什么setTimeout等待调用函数？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！