在上一个功能完成之前执行的Javascript功能

Question

I'm having a bit of a problem with the following code. 我的以下代码有些问题。 This is the function that I'm calling to create a FadeIn and FadeOut animation on some assets on a simple game I'm developing, using the great CreateJS library. 这是我调用的函数，它使用出色的CreateJS库在我正在开发的简单游戏上的某些资产上创建FadeIn和FadeOut动画。 I need to run this code one time for an asset, and then running it over anohter asset when the first function is complete. 我需要为资产运行一次此代码，然后在第一个功能完成时在另一个资产上运行它。 The function is the following: 该函数如下：

    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)
    }

And the way I'm calling this function is this: 我调用此函数的方式是：

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

I truly don't understand why the second call to the function is running simultaneously with the first one. 我真的不明白为什么第二次调用该函数与第一个调用同时运行。

Hope you can help me because this is a truly important project for me. 希望您能为我提供帮助，因为这对我来说是一个真正重要的项目。

Thank you in advance. 先感谢您。

Answer 1

IMHO you need something like this, I made two way example :) 恕我直言，你需要这样的东西，我举了两个例子：）

<!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功能

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-07-20 18:26:30

在上一个功能完成之前执行的Javascript功能

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-07-20 18:26:30

解决方案1
0 已采纳 2017-07-20 18:26:30