ウェブアニメーションAPIキュー

Question

私はアニメーションを持っています.1つの部分が終了すると、もう一方が開始され、非常に長いキューになることがあります。

私はここにコードを置く： https://jsfiddle.net/homa/qub7ejd1/

をあなたはキューを持って見ることができるように、私はこのコードを持っている：

newMessage('HA HA HA HA ....').onfinish = function() { 
    newMessage('Don\'t tell anybody I am here....').onfinish = function() { 
     newMessage('<b>PLEAAAASEEE</b>').onfinish = function() { 
      newMessage('I was very hungry...').onfinish = function() { 
       newMessage('Hello'); 
      } 
     } 
    } 

}; 

それが徐々に長くなるにつれて私のコードは本当に醜い取得します。また、特定のアニメーションをキュー内で実行する必要がある場合は、読み込みがほとんどできません。

この問題を解決するためのアドバイスがありますか？

Answer 1

コールバックの代わりにプロミスを使用できます。あなたが最初のアニメーションの後に実行秒のアニメーション（ブルーボックス）を見ることができるように、ここでの例は、（赤いボックス）が終了した：

https://jsfiddle.net/gibbok/mw23dmzf/

プロミスオブジェクトは、非同期計算のために使用されています。約束 は、現在または将来使用可能な値、または が使用できない値を表します。 More info here。

関連する興味深い記事はここに見つけることができます

http://danielcwilson.com/blog/2016/03/animations-and-promises/

var box1 = document.getElementById('box1'); 
var box2 = document.getElementById('box2'); 
var animate1 = function() { 
    return animation1 = box1.animate([{ 
    left: '0px' 
    }, { 
    left: '100px' 
    }], 1000); 
}; 
var animate2 = function() { 
    return animation2 = box2.animate([{ 
    top: '150px' 
    }, { 
    top: '250px' 
    }], 1000); 
}; 

function canceledHandler() { 
    console.log('animation1 canceled: ' + Date.now()); 
} 
animate1().finished.then(animate2, canceledHandler);