返回值时的Javascript函数排序

我有三个函数：show（）、hide（）和swap（），它们根据模板容器元素的id控制布局中显示的当前模板

我希望swap函数调用show，当show返回一个值时，我希望触发hide函数

例如

TweenMax中的onComplete函数在1.18秒后运行。我知道我可以将show（）放在这个函数中，或者将show传递到hide函数中，但是如果可能的话，我宁愿保持这两个函数的独立性

有没有办法做到这一点（最好不使用jQuery）

---

谢谢

只要hide和show是同步的——因为它们都是简单的DOM更新，所以看起来很可能是真的——您就可以使用

swap

来控制流

也就是说，如果这些操作是异步的（例如，如果它们需要AJAX请求），那么这种方法将不起作用。您必须传递回调以使其正常工作，或者使用es6接口中的新承诺使事情正常工作

hide(template).then(show)

---

TimelineMax

不够吗？如果我理解正确，您希望对动画进行排序，如果您已经加载了

TweenMax

，您可以使用

TimelineMax

，因为

因此，您的代码可以变成：

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

看一看。希望你觉得有用

更新：

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();

在这篇文章中，我添加了一个切换按钮，用于切换动画的前进或后退

其代码如下：

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();

希望有帮助。

show（）

目前不执行任何异步操作，因此您只需调用

show（）

，然后依次调用

hide（）

。如果它确实执行异步操作，那么您可以从异步完成函数调用

hide（）

，并引用代码“有一种简单的方法来执行此操作吗？”<代码>变量交换=函数（帧）{show（）；hide（）；}