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

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

只有你的声音（）功能实际上需要一些时间，所以我建议如下：

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

在Javascript中排序事件

3 个答案: