了解javascript中Promise（）的一点帮助_Javascript

了解javascript中Promise（）的一点帮助

javascript

了解javascript中Promise（）的一点帮助,javascript,Javascript,出于好奇，并且因为我认为这在将来可能会有所帮助，我尝试通过一个Promise（）对象制作一个非常简单的动画，试图弄清楚它是如何工作的，并理解如何构造它，但我对它的结构有点不确定，因为有一个函数movingBox没有被调用我是基于这些参考资料：以及这是我写的代码： <!DOCTYPE html> <html> <head> <style> #box { width: 75px;

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

我是基于这些参考资料：以及

这是我写的代码：

<!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>

正确

animByTimeout.then( ).catch(...

感谢所有示例和帮助。


<!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>

#盒子{
宽度：75px；
高度：75px；
位置：相对位置；
背景色：蓝紫色；
}
var-box=document.getElementById（“box”）；
var userScreenY=screen[“可用高度”]；
var h=0；//水平向左移动
var v=0；//垂直移动到底部
var pathLength=userScreenY/3；
var movingBox=函数（）{
setTimeout（函数（）{
if（h<路径长度）{
h++
box.style[“left”]=h+“px”；
如果（h>=路径长度/2）{
v++；
长方体样式[“顶部”]=v+“px”；
}
movingBox（）；
}
}, 20);
};
var animByTimeout=函数（）{
返回新承诺（（解决、拒绝）=>{
if（movingBox&&typeof（movingBox）==“函数”）解析（movingBox）；
else拒绝（“未找到动画功能”）
});
} 
animByTimeout（）
.然后（（animationFunc）=>{
animationFunc（）
}).接住(
（原因）=>{
console.log（“错误？=”+原因）；
}
);
box.addEventListener（“单击”，超时）；

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


#盒子{
宽度：75px；
高度：75px；
位置：相对位置；
背景色：蓝紫色；
}
var-box=document.getElementById（“box”）；
var userScreenY=screen[“可用高度”]；
var h=0；//水平向左移动
var v=0；//垂直移动到底部
var pathLength=userScreenY/3；
var movingBox=函数（）{
setTimeout（函数（）{
if（h<路径长度）{
h++
box.style[“left”]=h+“px”；
如果（h>=路径长度/2）{
v++；
长方体样式[“顶部”]=v+“px”；
}
movingBox（）；
}
}, 20);
};
var animByTimeout=函数（）{
返回新承诺（（解决、拒绝）=>{
if（movingBox&&typeof（movingBox）==“函数”）解析（movingBox）；
else拒绝（“未找到动画功能”）
});
} 
animByTimeout（）
.然后（（animationFunc）=>{
animationFunc（）
}).接住(
（原因）=>{
console.log（“错误？=”+原因）；
}
);
box.addEventListener（“单击”，超时）；

虽然您使用的示例与学习Promise完全无关，但我认为您正在尝试学习Promise，基本上Promise的概念是，您可以使用返回的方法

then（）

，在函数内的逻辑执行后执行回调。在您的示例中，在构建承诺时执行

resolve（）

。这意味着您的动画将在承诺解决后运行。动画循环完成后，您要做的是调用

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)
        })

基本上，promise的概念是，一旦函数中的逻辑执行完毕，就可以使用返回的方法

then（）

执行回调。在您的示例中，在构建承诺时执行

resolve（）

。这意味着您的动画将在承诺解决后运行。动画循环完成后，您要做的是调用

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)
        })

在您的代码中，承诺的用法没有任何意义。你想在这里使用承诺的原因是什么？看起来你根本不需要承诺。您是否尝试过删除承诺代码，只使用

movingBox

作为事件侦听器？您认为

animByTimeout会怎么样？然后（{function（func）{…}}）

会吗？@PatrickRoberts，不是很确定，但可能会从resolve调用movingBox（）？我基于上面的引用链接。@Doug:这里的重点是

。那么（{function…}）

是错误的，将函数作为匿名对象中的键没有意义。您想要的是

。然后（函数…

。在您的代码中，承诺的用法没有任何意义。你想在这里使用承诺的原因是什么？看起来你根本不需要承诺。您是否尝试过删除承诺代码，并仅使用

movingBox

作为事件侦听器？您认为

animByTimeout怎么样
    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)
        })