Question

为了好奇，因为我认为这对将来有所帮助，我试图通过Promise（）对象做一个非常简单的动画，试图弄清楚它是如何工作的，并理解如何构造它，但我我对它的结构有点不确定，因为有一个函数 movingBox 没有被调用。

我基于这些引用：Promise | JavaScript MDN和Deferred | Mozilla MDN

这是我写的代码：

# One:
User.novice.count
User.developer.count
User.pro.count
User.legend.count

# Two:
User.group(:proficiency).count

欢迎任何明确我做错的事情。提前谢谢。

EDITED 我在<!DOCTYPE html> <html> <head> <style> #box { width: 75px; height: 75px; position: relative; background-color: blueviolet; } </style> </head> <body> <div id="box"></div> <script> var box = document.getElementById("box"); var userScreenY = screen["availHeight"]; var h = 0; // move horizontally to the left var v = 0; // move vertically to the bottom var pathLength = userScreenY/3; var animByTimeout = new Promise ((resolve, reject) => { resolve(movingBox); }); animByTimeout.then( function(func) { func(); // here I suppose movingBox should get called console.log(func); } ).catch( (reason) => { console.log("Error? = " + reason); } ); function movingBox () { setTimeout(function() { if (h < pathLength) { h++ box.style["left"] = h + "px"; if (h >= pathLength/2) { v++; box.style["top"] = v + "px"; } movingBox(); } }, 20); }; box.addEventListener("click", animByTimeout); </script> </body> </html>方法中放错了大括号，我误解了Advanced Example中给出的例子。 Wiktor Zychla在评论中指出了这个错误。在这一点上完全是我的坏。我已经纠正了上面的代码，但是要在这里跟踪所有错误和纠正的方法。

错误

.then()

正确

animByTimeout.then({ }).catch(...

感谢所有的例子和帮助。

Answer 1

基本上，promise的概念是，一旦函数内部的逻辑执行，您就可以使用返回的方法then()来执行回调。在您的示例中，您在构造承诺时执行resolve()。这意味着您的动画将在promise解析后运行。您想要做的是在动画循环完成后调用resolve()。

我认为你试图实现以下目标，

    function movingBox (x, y, distance, element) {
      return new Promise((resolve, reject) => {
        (function animate() {
          setTimeout(() => {
            if (x < distance) {
              x++
              element.style["left"] = x + "px";

              if (y >= distance/2) {
                y++;
                element.style["top"] = y + "px";
              }

              animate()
            } else {
              resolve("Animation Complete");
            }
          }, 20);
        })()
      })
    };

    movingBox(0, 0, screen.availHeight / 3, document.getElementById("box"))
        .then(response => {
            console.info(response)
        })

在这里工作JSFiddle伙伴。 https://jsfiddle.net/stwilz/31w9rhLc/20/

此外，为您增添了一点点价值。使用promises的一个有用的功能是你可以链接你的功能。像这样......

    movingBox(0, 0, screen.availHeight / 3, document.getElementById("box"))
        .then(response => {
            console.info('Promise 1')
            return movingBox(0, 0, screen.availHeight * 0.66, document.getElementById("box"))
        })
        .then(response => {
            console.info('Promise 2')
            return movingBox(0, 0, screen.availHeight, document.getElementById("box"))
        })
        .then(response => {
            console.info('Promise 3')
            console.info(response)
        })

Answer 2

<!DOCTYPE html>
<html>
    <header>
        <style>
            #box {
                width: 75px;
                height: 75px;
                position: relative;
                background-color: blueviolet;
            }
        </style>
    </header>
    <body>
        <div id="box"></div>
        <script>
            var box = document.getElementById("box");
            var userScreenY = screen["availHeight"];
            var h = 0; // move horizontally to the left
            var v = 0; // move vertically to the bottom
            var pathLength = userScreenY/3;

            var movingBox = function () {
                        setTimeout(function() {
                            if (h < pathLength) {
                                h++
                                box.style["left"] = h + "px";

                                if (h >= pathLength/2) {
                                    v++;
                                    box.style["top"] = v + "px";
                                }

                                movingBox();
                            }
                        }, 20);
            };

            var animByTimeout = function(){
                return new Promise ((resolve, reject) => {
                    if(movingBox && typeof(movingBox) === 'function' )resolve(movingBox);
                    else reject("animation function not found")
                });
            } 

            animByTimeout()
            .then((animationFunc)=>{
                animationFunc()
            }).catch(
                (reason) => {
                    console.log("Error? = " + reason);
                }
            );


            box.addEventListener("click", animByTimeout);
        </script>
    </body>
</html>

虽然您使用的示例与学习Promise完全无关，但我认为您正在尝试这个

在javascript中理解Promise（）有点帮助

2 个答案: