Блог

Главная - Вопросы по программированию - Цикл очереди анимации с помощью jQuery/Promise

Цикл очереди анимации с помощью jQuery/Promise

#jquery #ajax #promise #jquery-animate #fadein

Вопрос:

Я пытаюсь понять, как я могу пройтись по очереди animation_ и дождаться завершения предыдущей, прежде чем начнется следующая.

В настоящее время происходит что-то вроде этого (но на самом деле аквард ..):

 let animation_queue = [];
function button_state(form, state) { 
    animation_queue.push(state);

    var box = $(form).find('.btn_state_box');

    animation_queue.reduce(function(prev, curr, _){
        return prev.then(function() {
            animation_queue.shift();
            return box.find("[class*='btn__state__']").fadeOut(500, function(){
                return box.find("[class*='btn__state__"   curr   "']").fadeIn(500)
            }).promise()
        });
    }, $.when());
}

Итак, основная идея этого заключается в том, что я получаю разные состояния из запроса ajax и хочу показать их в кнопке с приятной анимацией. Иногда я получаю более быстрый ответ, иногда медленный, но он всегда должен заканчивать анимацию, прежде чем начинать следующую.

Комментарии:

1. Вы уверены, что выражение вашего box.find(...).fadeOut(500, function() {return box.find(...).fadeIn(500);}).promise() лица возвращает обещание, которого вы ожидаете? Интересно box.find(...).fadeOut(500).promise().then(() => box.find(...).fadeIn(500).promise()) , может ли быть больше шансов?

2. @Roamer-1888 Я попробую 🙂 спасибо, приятель

3. Я думаю, что вам также нужно будет поднять inProgress флаг, когда идет сокращение, и опустить его, когда сокращение будет завершено. Добавьте в очередь безоговорочно, но начинайте новое сокращение только в том случае, если флажок снят.

4. @Странник-1888 этого: animation_queue.метод reduce(функция(пред, Карр, ){ возвращение пред.затем(функция() { вернуть шкатулку.найти(«[класс*=’БТН__государства,_ ‘]»).затухание(500).обещание().затем(() => { animation_queue. shift(); поле возврата.найти(«[класс*=’btn__состояние__» curr «‘]»).fadeIn(500) }).обещание() }); }, $.когда()); Наконец, делает то, что я хочу сделать. Спасибо!

Метки: