老师我这边把return都取消了，动画还是不受影响？怎么回事？按理说取消了都默认是成功状态，然后会混乱才对呀？不是很明白

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Promise</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      #box {
        width: 300px;
        height: 300px;
        background: red;
        transition: all 0.5s;
      }
    </style>
  </head>
  <body>
    <div id="box"></div>
    <script>
      const move = (ele, { x = 0, y = 0 } = {}, end = () => {}) => {
        //移动
        ele.style.transform = `translate3d(${x}px,${y}px, 0)`;
        //添加监听
        ele.addEventListener(
          "transitionend",
          () => {
            end();
          },
          false
        );
      };
      const box = document.getElementById("box");
      const movePromise = (el, point) => {
        return new Promise((reolve, reject) => {
          move(el, point, () => {
            reolve();
          });
        });
      };
      document.onclick = () => {
        movePromise(box, { x: 150 })
            .then(() => {
                movePromise(box, { x: 150, y: 150 })
            .then(() => {
                movePromise(box, { x: 0, y: 150 })
            .then(() => {
                movePromise(box, { x: 0, y: 0 });
            });
          });
        });
      };
    </script>
  </body>
</html>

帅得无心敲代码 2021-03-01

源自：Promise 3-4 项目作业

收起

2回答

好帮手慕星星 2021-03-02 10:01:11

同学你好，粘贴的代码与课程中不一致，是then中嵌套then模式

而课程中没有then没有嵌套then

所以同学用自己代码测试效果没问题，但是老师用课程中代码，将return去掉后，只有第一次有动画，后面移动直接显示最后一个位置，没有过渡效果。

另外关于return的理解也有问题，应该这样理解：

不加return，默认会返回一个成功状态的Promise对象，由于Promise的状态没有发生改变，导致后面的then方法是瞬间执行的，所以不会出现过渡效果。

自己再测试下，祝学习愉快！

收起回答

Agnex 2021-03-01 20:24:44

添加监听那段，原来的是then()后面继续打点调用then()的模式，像一个队列；你发的那段写回嵌套的那种模式了；

收起回答

提问者帅得无心敲代码 #1

同学，我也不知道呀，我格式化文档就这样了，但是功能还是一样的呀，难道受格式影响？

2021-03-01 20:28:21
Agnex 回复提问者帅得无心敲代码 #2

个人拙见啊，后面那种嵌套的模式，每次都是movePromise()那个函数在调用then()方法，而这个函数自己又返回一个定义好的Promise实例，所以才不用加return也能正常播动画；
原来的代码是那种movePromise().then().then().then()的模式，所以在then()方法里才需要返回一个定义好的Promise实例来使得下一个then()继续生效。

2021-03-01 20:53:16
提问者帅得无心敲代码回复 Agnex #3

我理解的是，链式调用都需要加return，把同层函数结果返回到下一层，一下层接着打点调用，把同层和下层也就链接起来了。只是这个移动动画我觉得每一层的then里面的内容都互不相干，就是简单的从上往下执行就行了。也就是在这里我觉得加不加return无所谓，都一样的

2021-03-01 21:09:26