JQuery анимация происходит не в порядке

Question

Я новичок в jQuery и JavaScript

Мне удалось запустить небольшой фрагмент, который изменяет элемент на главной странице моего сайта каждые 7 секунд. Но у меня проблема с порядком, в котором происходят анимации.

Как показано ниже, я ожидаю, что область display_popin исчезнет, ​​обновится, затем снова вернется. Но этого не происходит, вместо этого обновляется, затем исчезает, затем исчезает снова. Это сбивает меня с толку потому что порядок выполнения не совпадает с моим кодом, к чему я не привык в других языках. Текущее поведение сайта не желательно.

<div class="container bordered" id="display_popin"> 
    {% jinja_include "store/_popin.html" %}
</div>
<script type="text/javascript">

    var update_interval = 7000;

    function update_popin(){



        jQuery.get("/store/random_item/", function(data){

            display = $('#display_popin');
            display.fadeOut(400);
            display.html(data);
            display.fadeIn(400);

            window.setTimeout( update_popin, update_interval );

        });


    }

    $(document).ready(function() {
         window.setTimeout( update_popin, update_interval );
    });

</script>

Я попытался вставить вызов на jQuery.delay после моего вызова fadeOut, и это не имеет никакого эффекта. Я не знаю, является ли это проблемой с моим пониманием jQuery или javascript, оба являются новыми для меня. Заметьте, я нашел несколько статей о переполнении стека, которые кажутся похожими, решения обычно включают создание очереди анимаций, я должен сделать это здесь?

Answer 1

display.fadeOut(400, function(){
    display.html(data);
    display.fadeIn(400);
});

По умолчанию код не ожидает завершения действия, и когда срабатывает fadeout, он продолжит выполнение следующего действия, но затухание все еще продолжается.Выше код будет ждать окончания fadeOut, а затем делать все остальное.