上一个函数完成之前执行的Javascript函数

问题描述：

我在下面的代码中遇到了一些问题。这是我打电话给我开发的一个简单游戏上的一些资产上创建FadeIn和FadeOut动画的函数，它使用了很好的CreateJS库。我需要一次为资产运行此代码，然后在第一个功能完成时通过anohter资产运行它。功能如下：上一个函数完成之前执行的Javascript函数

function fadeInOut(asset, duration, stage) 
    { 
     stage.addChild(asset) 
     let fadeInOut = setInterval(function() 
     { 
     asset.alpha += 1/24; 
     if (asset.alpha >= 1) 
     { 
      asset.alpha = 1; 
      setTimeout(function() 
      { 
      let fadeOut = setInterval(function() 
      { 
       asset.alpha -= 1/24; 
       if (asset.alpha <= 0) 
       { 
       asset.alpha = 0; 
       stage.removeChild(asset); 
       clearInterval(fadeOut); 
       } 
      }, 1000/24) 
      }, 1000 * duration) 
      clearInterval(fadeInOut); 
     } 
     }, 1000/24) 
    }

而且我调用这个函数的方式是这样的：

fadeInOut(assets.eiko, 2, stage); 
    fadeInOut(assets.logo, 3, stage);

我真的不明白为什么给函数的第二个呼叫同时与运行第一。

希望你能帮助我，因为这对我来说是一个非常重要的项目。

预先感谢您。

那怎么JavaScript的工作......你的setInterval调用同时运行 - 你需要把你的第二个电话里面最内层setInterval或其他......但如果你希望得到更好的帮助，你应该首先简化问题。看看[mcve] –

好的，非常感谢，我会研究一下。 –

考虑使用TweenJS（或补间库）淡入/淡出内容。 TweenJS有一个很棒的API来完成这样的事情。 – Lanny

答

恕我直言，你需要这样的事情，我做了两个方法例如:)

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Example</title> 
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script> 
<script> 
function init() 
{ 
    var stage = new createjs.Stage("canvas"); 
    createjs.Ticker.setFPS(24); //set some FPS 
    createjs.Ticker.addEventListener("tick", stage); //set autiomatic refresh 

    //draw some circles for the example usage 
    var circle1 = new createjs.Shape(); 
    circle1.graphics.beginFill("#FF0000").drawCircle(0,0,50); 
    circle1.x=100; 
    circle1.y=100; 
    circle1.alpha=0; 
    stage.addChild(circle1); 

    var circle2 = new createjs.Shape(); 
    circle2.graphics.beginFill("#0000FF").drawCircle(0,0,50); 
    circle2.x=300; 
    circle2.y=100; 
    circle2.alpha=0; 
    stage.addChild(circle2); 

    //first version with function call after the first animation 
    createjs.Tween.get(circle1).to({alpha:1},1000).to({alpha:0},1000).call(
     function() 
     { 
      createjs.Tween.get(circle2).to({alpha:1},1000).to({alpha:0},1000) 
     } 
    ); 

    //seconds version: with delay instead of onComplete function, comment first version above, uncomment code below and try 
    /* 
    createjs.Tween.get(circle1).to({alpha:1},1000).to({alpha:0},1000); 
    createjs.Tween.get(circle2).wait(2000).to({alpha:1},1000).to({alpha:0},1000) 
    */ 


} 
</script> 
</head> 
<body onload="init();"> 
    <canvas id="canvas" width="600" height="400"></canvas> 
</body> 
</html>

上一个函数完成之前执行的Javascript函数

相关推荐