Последовательность событий в 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
}

FYI, возможности анимации в библиотеках, таких как 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

Библиотека 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

Answer 3

почему бы не использовать подход «событие».как onTaskDone ();

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

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