Javascript中的事件排序

我正在尝试使用javascript制作一个简单的隐藏对象游戏。当用户找到并单击一个图像时，我希望按以下顺序发生3件事：；声音播放时，图像大小增大，图像变为不可见。我遇到的问题是让这3个事件按顺序发生，而不是同时发生。现在，这三件事似乎同时发生

我尝试过使用setTimeout（），虽然这确实会产生延迟，但它仍然会同时运行所有函数，即使每个函数都嵌套在setTimeout中

示例：（所做的只是等待1.5秒，然后播放声音并使图像不可见）：

下面是我当前使用的函数，实际结果是：单击图像，2秒钟内什么也没有发生，然后声音播放，图像变为不可见

function FindIt(image, id){
sound();
bigger(image);
hide(image);
}

function sound(){
document.getElementById("sound_element").innerHTML= "<embed src='chime.wav' hidden=true    autostart=true loop=false>";
}

function bigger(image){
var img = document.getElementById(image);  
img.style.width = 112;  
img.style.height = 112;
}


function hide(id){
var ms = 2000; 
ms += new Date().getTime();
while (new Date() < ms){} //Create a 2 second delay
var img = document.getElementById(id);
img.style.visibility='hidden';
}

函数FindIt（图像，id）{
声音（）；
更大（图像）；
隐藏（图像）；
}
函数声音（）{
document.getElementById（“声音元素”）.innerHTML=“”；
}
功能更大（图像）{
var img=document.getElementById（图像）；
img.style.width=112；
img.style.height=112；
}
函数隐藏（id）{
var ms=2000；
ms+=新日期（）.getTime（）；
while（new Date（）

任何指导都将不胜感激

为什么不使用“事件”方法。比如onTaskDone（）

为什么不使用“事件”方法呢。比如onTaskDone（）

---

要按顺序触发事件，您需要在第一项完成后的一段时间内执行第二项，在第二项完成后的一段时间内执行第三项，等等

实际上，只有sound（）函数需要一些时间，因此我建议如下：

function FindIt(image, id){
    sound();
    // set timer to start next action a certain time after the sound starts
    setTimeout(function() {
        bigger(image);
        // set timer to start next action a certain time after making the image bigger
        setTimeout (function() {
            hide(image);
        }, 1000);   // set this time for how long you want to wait after bigger, before hide
    }, 1000);   // set the time here for how long you want to wait after starting the sound before making it bigger
}

仅供参考，jQuery或YUI等库中的动画功能使这类事情变得更加容易

另外，请不要在JS中使用这种构造：

while (new Date() < ms){}

jQuery管理一个动画队列，并为您设置所有计时器和执行所有排序和动画。这是一个非常非常容易编程，并给出了一个非常好的结果

---

您可以在此处看到它的工作和使用：。

要按顺序触发事件，您需要在第一项完成后的一段时间内执行第二项，在第二项完成后的一段时间内执行第三项，等等

实际上，只有sound（）函数需要一些时间，因此我建议如下：

function FindIt(image, id){
    sound();
    // set timer to start next action a certain time after the sound starts
    setTimeout(function() {
        bigger(image);
        // set timer to start next action a certain time after making the image bigger
        setTimeout (function() {
            hide(image);
        }, 1000);   // set this time for how long you want to wait after bigger, before hide
    }, 1000);   // set the time here for how long you want to wait after starting the sound before making it bigger
}

仅供参考，jQuery或YUI等库中的动画功能使这类事情变得更加容易

另外，请不要在JS中使用这种构造：

while (new Date() < ms){}

jQuery管理一个动画队列，并为您设置所有计时器和执行所有排序和动画。这是一个非常非常容易编程，并给出了一个非常好的结果

---

您可以在这里看到它的工作和使用：。

Frame.js库设计用于优雅地处理以下情况：

function FindIt(image, id){
   Frame(10,   function(next) { sound();       next(); });
   Frame(30,   function(next) { bigger(image); next(); });
   Frame(1500, function(next) { hide(image);   next(); });
   Frame.start();
}

与使用标准超时相比，Frame.js提供了许多优势，特别是如果你正在做很多这类事情，而对于游戏来说，你很可能是这样

---

Frame.js库设计用于优雅地处理以下情况：

function FindIt(image, id){
   Frame(10,   function(next) { sound();       next(); });
   Frame(30,   function(next) { bigger(image); next(); });
   Frame(1500, function(next) { hide(image);   next(); });
   Frame.start();
}

与使用标准超时相比，Frame.js提供了许多优势，特别是如果你正在做很多这类事情，而对于游戏来说，你很可能是这样

---

while（newdate（）

这个片段真是太搞笑了<代码>while（new Date（）代码片段很搞笑！谢谢，这成功了！“while（new Date（）