首页手记简单es6的promise使用，加上运用中遇到的问题

简单es6的promise使用，加上运用中遇到的问题

标签：

JavaScript

看了es6的内容，实在是有点多，这里主要用了promise，函数默认参数的使用，let的使用，好像没有字符串拼接的替用。

看了很多关于promise的使用，可以说是一头雾水，有些讲的很深入，例子很看不懂，有些运行错误了。

主要是我们需要在function里面返回一个promise。这样可以很好的解决回调问题，比如我们的ajax还有我们的animate。

var p=new Promise(function(resolve,reject){
    ...........    //你的东西
    resolve();    //这里是成功的函数。指向then(fun1,fun2)总的fun1
    rejuect();    //这里是失败的函数。指向then(fun1,fun2)总的fun2
})

说说在学习中遇到的问题，因为很少用原生，刚开始用ele.style[prop]获取元素的样式总是失败，后来查资料知道了区别：
ele.style.height只是用与取行内样式和写样式。
getComputedStyle(obj,false)[prop] 这个适用于chorme，ff对样式的获取，但是不可以写样式。
currentStyle[prop]是针对ie的样式获取。

对于promise的学习还是比较浅，接下来要用到还是需要在深入学习。

下面是完整代码，可以运行一下看看

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>promise</title>
    <style>
        div{
            height:100px;
            width: 100px;
            background: black;
            border-radius: 50%;
            position: absolute;
            left: 10px;
            top: 10px;
        }
    </style>
</head>
<body>
    <div id="anim"></div>
    <script>
        function getStyle(obj,attr){
            if(obj.currentStyle){
                return obj.currentStyle[attr];
            }else{
                return getComputedStyle(obj,false)[attr];
            }
        }       
        function my(selector){
            let b=new _my(selector);
            return b;
        }
        let _my=function(selector){
            this.ele=document.querySelector(selector);
        }
        _my.prototype.animate=function(obj,delay=1000){
            let self=this;
            let promise = new Promise(function(resolve,reject){
                for(let prop in obj){
                    let oldVal = parseInt(getStyle(self.ele,prop));
                    let a = (obj[prop] - oldVal)/(delay/10);
                    let timer = setInterval(function(){
                        if(parseInt(oldVal) != obj[prop]){
                            self.ele.style[prop] = oldVal + a + 'px';
                            oldVal = parseFloat(self.ele.style[prop]);
                        }else{
                            self.ele.style[prop] = obj[prop] + 'px';
                            clearInterval(timer);
                        }
                    },10)                               
                }
                setTimeout(function(){
                    resolve();
                    reject();
                },delay);
            })
            return promise;
        }
        my('div').animate({height:200,width:200},5000).then(function(){
            return my('div').animate({left:100}, 3000)
        }).then(function(){
            return my('div').animate({top: 100}, 2000)
        });

    </script>
</body>
</html>

点击查看更多内容