promise基本使用——简单的运动效果

 一开始接触到promise的时候也是比较懵逼的，不太理解他们的奥秘在哪儿，以及我们为什么要使用它，随着深入的了解，觉得他很大程度了解决了我们之前的回调地域的问题，还有关于数据请求异步的方式，promise极大程度的解决了我们的代码多层嵌套难以阅读理解的问题。

接着入正题，现在我们要实现一个边框的划入效果。这个效果实现起来也是很容易的，css3基本上就能够实现了，这里我们不讨论css3.只讨论js的使用。下面贴代码。

       <div class="box">
            <ul>
                <li class="box_left"></li>
                <li class="box_right"></li>
                <li class="box_top"></li>
                <li class="box_bottom"></li>
            </ul>
        </div>
        <script>
            function $_(name) {
                return document.querySelector(name);
            }
            function getStyle(obj, attr) {
                return getComputedStyle(obj)[attr];
            }
            function animate(obj, json, fn) {
                clearInterval(obj.timer);
                obj.timer = setInterval(function () {
                    var bstop = true;
                    for (var key in json) {
                        var icur;
                        if (key == "opacity") {
                            icur = Math.round(getComputedStyle(obj)[key] * 100);
                        }
                        else {
                            icur = parseInt(getComputedStyle(obj)[key]);
                        }
                        var speed = (parseInt(json[key]) - icur) / 6;
                        if (speed !== 0) {
                            bstop = false;
                        }
                        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                        if (key == "opacity") {
                            obj.style[key] = (icur + speed) / 100;
                        } else {
                            obj.style[key] = icur + speed + "px";
                        }
                    }
                    if (bstop) {
                        clearInterval(obj.timer);
                        fn && fn()
                    }
                }, 30)
            }
            animate($_(".box ul li:first-child"), {
                height: "106px"
            },function(){
                animate($_(".box ul li:nth-child(3)"),{
                    width:"106px"
                },function(){
                    animate($_(".box ul li:nth-child(2)"),{
                        height:"106px"
                    },function(){
                        animate($_(".box ul li:nth-child(4)"),{
                            width:"106px"
                        })
                    })
                })
            })
        </script>

效果演示如下

 

如果使用jquery的小伙伴可以直接使用jquery的animate函数，这里我们使用的原生js，自己自定义实现了aniamte方法，当动画结束后会触发一个回调函数，这里我们就可以看到animate函数多层嵌套，看起来非常的不美观，而且如果写的很多的话自己很容易都会被绕晕。

下面附上用promise实现的效果代码

       <div class="box">
            <ul>
                <li class="box_left"></li>
                <li class="box_right"></li>
                <li class="box_top"></li>
                <li class="box_bottom"></li>
            </ul>
        </div>
        <script>
            function $_(name) {
                return document.querySelector(name);
            }
            function getStyle(obj, attr) {
                return getComputedStyle(obj)[attr];
            }
            function promiseAnimate(obj, json) {
                return new Promise(function (resolve,rejected) {
                    clearInterval(obj.timer);
                    obj.timer = setInterval(function () {
                        console.log(resolve)
                        var bstop = true;
                        for (var key in json) {
                            var icur;
                            if (key == "opacity") {
                                icur = Math.round(getComputedStyle(obj)[key] * 100);
                            }
                            else {
                                icur = parseInt(getComputedStyle(obj)[key]);
                            }
                            var speed = (parseInt(json[key]) - icur) / 6;
                            if (speed !== 0) {
                                bstop = false;
                            }
                            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                            if (key == "opacity") {
                                obj.style[key] = (icur + speed) / 100;
                            } else {
                                obj.style[key] = icur + speed + "px";
                            }
                        }
                        if (bstop) {
                            clearInterval(obj.timer);
                            resolve()
                        }
                    }, 30)
                })
            }
            promiseAnimate($_(".box ul li:first-child"),{height:"106px"})
            .then(function(){
                return promiseAnimate($_(".box ul li:nth-child(3)"),{width:"106px"}) 
            })
            .then(function(){
                return promiseAnimate($_(".box ul li:nth-child(2)"),{height:"106px"}) 
            })
            .then(function(){
                return promiseAnimate($_(".box ul li:nth-child(4)"),{width:"106px"}) 
            })
        </script>

 这样一看代码是不是清晰了好多，promise实现的效果更易于阅读，也避免了之前的多层嵌套的问题，而且可以链式调用。最近一直在研究promise源码的实现，底层实现是有一点点绕，可能需要js基础比价扎实，我看了好几天才稍微有点头绪，未来的路很长，还需要不断的学习来充实自己。