对于序列动画的提问(Promise链)！！？

MDN Learn
#1

const aliceTumbling = [

{ transform: “rotate(0) scale(1)” },

{ transform: “rotate(360deg) scale(0)” },

];

const aliceTiming = {

duration: 2000,

iterations: 1,

fill: “forwards”,

};

const alice1 = document.querySelector("#alice1");

const alice2 = document.querySelector("#alice2");

const alice3 = document.querySelector("#alice3");

alice1.animate(aliceTumbling, aliceTiming).finished

.then(() => {alice2.animate(aliceTumbling, aliceTiming).finished;})

.then(() => {alice3.animate(aliceTumbling, aliceTiming).finished})

为什么上面两个then(),去掉第一个then回调的{}就能顺序执行动画，加上第一个then中的{}第二和第三个动画会同时执行？？？？为什么第三个不等第二个执行完成？？不太理解{}的作用

#2

这里面你可能有几个东西没有搞清楚
1.理解链式写法:
有顺序的链式写法是需要返回值的,在这个里面就是需要返回第一个then里面的promise(用这个返回的promise去.后面的then);
没有返回值实际是共用一个最开始promise对象,表达的意思不一样,虽然结构一样.所以你看起来没有顺序关系的写法,在这里实际是错误的.
2.关于箭头函数的简写方式(类似lambda表达式):
箭头函数里面只有一行可以简写,这里面实际同时去掉了return和{}.
3.注意javascript的函数头没有明显表示有无返回值,跟它无需指定返回值的类型有关.

1 Like