前の関数が完了する前に実行されるJavascript関数

次のコードで少し問題があります。これは、素晴らしいCreateJSライブラリを使用して、私が開発している単純なゲームのいくつかのアセットでFadeInとFadeOutアニメーションを作成するために呼び出す関数です。私はこのコードを資産のために一度実行し、最初の関数が完了したときにそれを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) 
    }

そして、私はこの関数を呼んでいる方法がこれです：関数は次のような関数への2回目の呼び出しはと同時に実行されている理由は、私は本当に理解していない

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

最初の1つ。

私にとって本当に重要なプロジェクトなので、お手伝いできますか。

ありがとうございます。

出典

2017-07-17 Guido La Rosa

ジャバスクリプトがどのように動作するかだ...あなたのsetInterval通話が同時に実行されている - あなたは最も内側の内側にあなたの2番目の呼び出しを配置する必要がありますsetIntervalまたは何か..あなたがより良い助けを期待する場合は、最初に問題を単純化する必要があります。 [mcve] –

を参照してください。ありがとう、私はそれを調べます。 –

TweenJS（またはtweening lib）を使用してコンテンツをフェードイン/アウトすることを検討してください。 TweenJSにはこのようなことをするための大きな連鎖APIがあります。 – Lanny

あなたはこのようなものが必要IMHO、私は2つの方法の例を作った:)

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

出典

2017-07-20 18:26:30 gMirian

前の関数が完了する前に実行されるJavascript関数

答えて

関連する問題