Как реализовать «ожидание» события?

Question

[Максим Девда]

Суть вопроса: есть например несколько слов которые нужно по очереди прочесть, разобрать и собрать.

1) Прочесть - это сделать эффект чтения (в интервале выделяю по очереди символы слова например: МАКсим)
2) Разобрать - символы слова разлетаются рандомно
3) Собрать - перетащить все буквы на их позицию
4) после этого проделать все с остальными словами так же

Подскажите мне как сделать эффект ожидания события сбора слова ?
То есть как мне перейти к другому слову и как код должен понимать когда это нужно сделать ?
В какую сторону мне копать ?

P.S. Сейчас все сделано через интервалы и рекурсивные вызови функции с таймаутом, но получается "макаронный" код, который сложно поддерживать. Интересует именно архитектура или алгоритм который упростить расширение возможностей системы и как то упорядочит все это дело.

Answer 1

[Сергей Соколов]

События. Когда буква встаёт на место, она запускает событие. Слушатель этого события должен проверить, правильно ли собрано всё слово, и если да – перейти к следующему.

Вероятно, вы ещё сделаете минимальную анимацию ликования по поводу очередного собранного слова, чтобы в игре был какой-то ритм и не было суеты.

Для слов – вести какой-то счётчик. Удобно задавать предложения просто текстовой строкой, бить её на слова по пробелу, затем работать с каждым словом по очереди, обновляя указатель на «текущее» слово.

Comments

[Максим Девда]

Спасибо за ответ. Еще возник вопрос: а как тогда сделать очередность ? Счетчик какой-то вести ?

[Максим Девда]

Всё описанное вами – это просто составная анимация без участия пользователя?

Нет пользователь собирает слово

[Сергей Соколов]

Максим Девда: обновил ответ.

[Максим Девда]

Сергей Соколов так куда копать я понял. Спасибо! А может все это сделать через callback?
Ну что бы без событий, так как у меня будут интервалы там на чтении.
Как лучше ?

[Сергей Соколов]

Максим Девда: как вас удобнее, лишь бы работало ) События – логично и чисто. Наверное, можно и на callback'ах.

[Максим Девда]

Сергей Соколов Понял.
Спасибо еще раз.

Answer 2

[Ivanq]

У вас будут промисы:

var prom = new Promise.resolve();
words.forEach(v => {
    prom = prom.then(() => {
        return myCoolAnimation(v);
    });
});

function myCoolAnimation(v) {
    return new Promise((resolve, reject) => {
        // Делаем все
        el.onclick = () => { // пример, у Вас будет другое событие
            // Доделали
            resolve();
        };
    });
}

UPD Обновил ответ

Comments

[Максим Девда]

Но ведь у Promise поддержка хромает или нет ?

[Виталий]

Максим Девда: просветите пожалуйста в каком смысле хромает?

[Ivanq]

Максим Девда: caniuse.com/#feat=promises

[Ivanq]

Максим Девда: В конце концов, всегда можно задействовать полифилл.

[Максим Девда]

Ivanq ну 77%, это не много ) ну да ладно, c Promise я еще не работал - попробую

[Ivanq]

Максим Девда: Мощная штука, рекомендую. Полифилы тоже есть, причем много.

[Максим Девда]

Ivanq ну отпишусь тут о результатах