在 Javascript 中对事件进行排序

Question

我正在尝试使用 javascript 制作一个简单的隐藏物体游戏。当用户找到并单击图像时，我希望按以下顺序发生 3 件事；声音响起，图像尺寸增大，然后图像消失。我遇到的问题是让 3 个事件按顺序发生，而不是同时发生。现在看来，这三件事都是同时发生的。

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

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

function FindIt(image, id){
var t = setTimeout('sound()',10);
var b = setTimeout('bigger(' + image + ')',30);
var h = setTimeout('hide(' + image + ')',1500);
}

以下是我当前使用的功能，实际结果是：单击图像，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';
}

任何指导将不胜感激！

Answer 1

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

只有您的 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){}

这会因延迟而锁定浏览器，并且对查看者非常不友好。使用 setTimeout 创建延迟。

作为参考，使用 jQuery 中的动画库，jQuery 代码处理对对象的单击，然后在 2 秒内将其动画化到更大的尺寸，延迟 1 秒，然后向上滑动消失，如下所示：

$("#rect").click(function() {
    $(this).animate({height: 200, width: 400}, 2000).delay(1000).slideUp();
});

jQuery 管理动画队列并处理设置所有计时器并为您完成所有排序和动画。它的编程变得非常非常容易，并且给出了非常好的结果。

您可以在这里查看它的工作原理和使用方法：http://jsfiddle.net/kC4Mz/。

Answer 2

为什么不使用“事件”方法。像 onTaskDone();

function task1(arg, onTask1Done){
    console.log(arg);
    if(onTask1Done)onTask1Done();
}

task1("working", function(){console.log("task2");});

Answer 3

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 提供了许多优势，特别是如果您正在做很多此类事情（对于游戏来说，您可能会这样做）。

https://github.com/bishopZ/Frame.js