0

ある部分が終了すると別の部分が開始されるアニメーションがあり、非常に長いキューになる可能性があります。

ここにコードを入れます: 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');
            }
        }
    }

};

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

この問題を解決するための提案はありますか?

4

1 に答える 1

0

コールバックの代わりに Promise を使用できます。最初のアニメーション (赤いボックス) が終了した後に実行される 2 番目のアニメーション (青いボックス) を見ることができるように、ここに例を示します。

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

Promise オブジェクトは、非同期計算に使用されます。Promise は、現在、または将来、またはまったく利用できない可能性のある値を表します。詳細はこちら。

関連する興味深い記事は次の場所にあります。

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);
于 2016-11-29T20:57:51.793 に答える