javascript - 在 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 中的动画库，处理单击对象然后将其在 2 秒内动画到较大尺寸，延迟 1 秒，然后向上滑动消失的 jQuery 代码如下:

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

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

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