Последовательность функций Javascript при возврате значения

Question

У меня есть три функции: show(), hide() и swap(), которые управляют текущим шаблоном, отображаемым в макете, с учетом идентификатора элемента контейнера шаблона.

Я хочу, чтобы функция подкачки вызывала show, и когда show возвращает значение, я хотел бы вызвать функцию hide.

E.g.

var hide = function(template) { 
    TweenMax.to(frame, 1.18, { 
     opacity: 0, 

     onComplete: function() { 
      return true; 
     } 
    }); 
} 

var show = function(template) { 

} 

var swap = function(currentTemplate, targetTemplate) { 
    // hide(currentTemplate) then when "true" is returned, show(targetTemplate) 

} 

swap(); 

Функция onComplete внутри TweenMax работает через 1,18 секунды. Я знаю, что я мог бы поставить show() внутри этого или передать шоу в функцию hide, но я предпочел бы сохранить два независимых, если это возможно.

Есть ли способ сделать это (желательно без jQuery)?

Спасибо!

Answer 1

до тех пор, пока скрыть и показать синхронно - что, поскольку оба они являются простыми обновлениями DOM, похоже, что это правда, вы можете использовать swap для управления потоком.

При этом, если эти действия были асинхронными (если они требовали, например, запросы AJAX), этот подход не сработает. Вам нужно будет пройти обратные вызовы, чтобы заставить их работать, или использовать новый интерфейс Promise in es6, чтобы заставить все работать.

hide(template).then(show) 

Answer 2

Не стоит TimelineMax? Если я правильно понимаю, вы смотрите на последовательность ваших анимаций, и если у вас уже есть TweenMax, вы можете использовать TimelineMax для этого, потому что TweenMax bundles TimelineMax & other goodies with it.

Таким образом, ваш код может стать:

function swap(currentTemplate,targetTemplate){ 
    new TimelineMax().to(currentTemplate,1.18,{opacity:0}).to(targetTemplate,1.18,{opacity:1}); 
} 

Посмотрите на this fiddle. Надеюсь, вы найдете ее полезной.

Update:

В этом new fiddle, я добавил кнопку Тумблер, который переключает анимации вперед или назад.

кодекс, который, как Belows:

JavaScript:

var byeWorld=document.querySelectorAll('.bye-world')[0]; 
var helloWorld=document.querySelectorAll('.hello-world')[0]; 
var toggleButton=document.querySelectorAll('.toggler')[0]; 
var timeline=new TimelineMax({paused:true,reversed:true}); 
var duration=.8; 

function init(){ 
    toggleButton.addEventListener('click',swap,false); 
    TweenMax.set(helloWorld,{opacity:0}); 
    timeline.to(byeWorld,duration,{opacity:0,ease:Power2.easeIn}).to(helloWorld,duration,{opacity:1,ease:Power2.easeOut}); 
} 

function swap(){ 
    (timeline.reversed())?timeline.play():timeline.reverse(); 
} 

init(); 

Надеется, что это помогает.