/* 2 功能:生成博客目录的JS工具 3 测试:IE8,火狐,google测试通过 6 */ 7 var BlogDirectory = { 8 /* 9 获取元素位置,距浏览器左边界的距离(left)和距浏览器上边界的距离(top) 10 */ 11 getElementPosition:function (ele) { 12 var topPosition = 0; 13 var leftPosition = 0; 14 while (ele){ 15 topPosition += ele.offsetTop; 16 leftPosition += ele.offsetLeft; 17 ele = ele.offsetParent; 18 } 19 return {top:topPosition, left:leftPosition}; 20 }, 21 22 /* 23 获取滚动条当前位置 24 */ 25 getScrollBarPosition:function () { 26 var scrollBarPosition = document.body.scrollTop || document.documentElement.scrollTop; 27 return scrollBarPosition; 28 }, 29 30 /* 31 移动滚动条,finalPos 为目的位置,internal 为移动速度 32 */ 33 moveScrollBar:function(finalpos, interval) { 34 35 //若不支持此方法,则退出 36 if(!window.scrollTo) { 37 return false; 38 } 39 40 //窗体滚动时,禁用鼠标滚轮 41 window.onmousewheel = function(){ 42 return false; 43 }; 44 45 //清除计时 46 if (document.body.movement) { 47 clearTimeout(document.body.movement); 48 } 49 50 var currentpos =BlogDirectory.getScrollBarPosition();//获取滚动条当前位置 51 52 var dist = 0; 53 if (currentpos == finalpos) {//到达预定位置,则解禁鼠标滚轮,并退出 54 window.onmousewheel = function(){ 55 return true; 56 } 57 return true; 58 } 59 if (currentpos < finalpos) {//未到达,则计算下一步所要移动的距离 60 dist = Math.ceil((finalpos - currentpos)/10); 61 currentpos += dist; 62 } 63 if (currentpos > finalpos) { 64 dist = Math.ceil((currentpos - finalpos)/10); 65 currentpos -= dist; 66 } 67 68 var scrTop = BlogDirectory.getScrollBarPosition();//获取滚动条当前位置 69 window.scrollTo(0, currentpos);//移动窗口 70 if(BlogDirectory.getScrollBarPosition() == scrTop)//若已到底部,则解禁鼠标滚轮,并退出 71 { 72 window.onmousewheel = function(){ 73 return true; 74 } 75 return true; 76 } 77 78 //进行下一步移动 79 var repeat = "BlogDirectory.moveScrollBar(" + finalpos + "," + interval + ")"; 80 document.body.movement = setTimeout(repeat, interval); 81 }, 82 83 htmlDecode:function (text){ 84 var temp = document.createElement("div"); 85 temp.innerHTML = text; 86 var output = temp.innerText || temp.textContent; 87 temp = null; 88 return output; 89 }, 90 91 /* 92 创建博客目录, 93 id表示包含博文正文的 div 容器的 id, 94 mt 和 st 分别表示主标题和次级标题的标签名称(如 H2、H3,大写或小写都可以!), 95 interval 表示移动的速度 96 */ 97 createBlogDirectory:function (id, mt, st, interval){ 98 //获取博文正文div容器 99 var elem = document.getElementById(id); 100 if(!elem) return false; 101 //获取div中所有元素结点 102 var nodes = elem.getElementsByTagName("*"); 103 //创建博客目录的div容器 104 var divSideBar = document.createElement('DIV'); 105 divSideBar.className = 'sideBar'; 106 divSideBar.setAttribute('id', 'sideBar'); 107 var divSideBarTab = document.createElement('DIV'); 108 divSideBarTab.setAttribute('id', 'sideBarTab'); 109 divSideBar.appendChild(divSideBarTab); 110 var h2 = document.createElement('H2'); 111 divSideBarTab.appendChild(h2); 112 var txt = document.createTextNode('目录导航'); 113 h2.appendChild(txt); 114 var divSideBarContents = document.createElement('DIV'); 115 divSideBarContents.style.display = 'none'; 116 divSideBarContents.setAttribute('id', 'sideBarContents'); 117 divSideBar.appendChild(divSideBarContents); 118 //创建自定义列表 119 var dlist = document.createElement("dl"); 120 divSideBarContents.appendChild(dlist); 121 var num = 0;//统计找到的mt和st 122 mt = mt.toUpperCase();//转化成大写 123 st = st.toUpperCase();//转化成大写 124 //遍历所有元素结点 125 for(var i=0; i

JavaScript ES6 Promise对象

说明

Node.js中,以异步(Async)回调著称,使用了异步,提高了程序的执行效率,但是,代码可读性较差的。
假如有几个异步操作,后一个操作需要前一个操作的执行完毕之后返回的数据才能执行下去,如果使用Node.js,就需要一层层嵌套下去,Promised对象就是针对此问题所提出来的的解决办法。

基本概念

Promise对象状态:

  1. pending
    初始状态,也称为未定状态,就是初始化Promise时,调用executor执行器函数后的状态。
  2. fulfilled
    完成状态,意味着异步操作成功。
  3. rejected
    失败状态,意味着异步操作失败。

状态转换只有这两种pending->fulfilled pending->rejected,可返回的这个Promise对象的状态主要是根据promise1.then()方法返回的值:

状态转化是单向的,不可逆转,已经确定的状态(fulfilled/rejected)无法转回初始状态(pending)

当状态为rejected,该promise无法继续往下执行,需要添加一个catch获得异常信息
回调函数:

  • resolve
    pending状态转为fulfilled状态时候回调(操作成功)
  • reject
    pending状态转为rejected状态时候回调(操作失败)

方法:

  • then()
  • catch()
  • all()
  • race()

基本使用

new Promise(function(resolve,reject){
    //这里面实现异步操作,ajax等..
    //获得结果,回调传参
    if(/*success*/){
        resolve();
    }else{
        reject();
    }
});
//虽然没有去执行setTimeOut函数,但是Promise会自动执行,所以,一般需要将Promise写在一个function里面
new Promise(function(resolve,reject){
    setTimeout(function(){
        let num = Math.random();
        //当随机数小于0.5,当前promise完成了执行
        if(num<0.5){
            resolve(num);
        }else{
            reject("错误,num>=0.5");
        }
        console.log('执行完成');
    },2000);
});
let p =new Promise(function(resolve,reject){
    setTimeout(function(){
        let num = Math.random();
        //当随机数小于0.5,当前promise完成了执行
        if(num<0.5){
            resolve(num);
        }else{
            reject(num);
        }
        console.log('执行完成');
    },2000);
});
p.then(function(data){
    //这里的data是之前resolve中的回调参数
    console.log(data);
},function(error){
    //这里的error是之前resolve中的回调参数
    console.log("错误原因为"+error);
});

进阶使用

then()

Promise then(fun(resolve,reject))

p.then(function(data){
    //这里的data是之前resolve中的回调参数
    console.log(data);
},function(data){
    //这里的data是之前resolve中的回调参数
    console.log("错误");
    console.log(data);
});

then方法,可以接收回调的参数并进行处理,then方法返回的是一个Promise对象。这里,我们主要关心的是返回的Promise对象的状态。

可返回的这个Promise对象的状态主要是根据promise1.then()方法返回的值:

  1. 如果then()方法中返回了一个参数值,那么返回的Promise将会变成接收状态。
  2. 如果then()方法中抛出了一个异常,那么返回的Promise将会变成拒绝状态。
  3. 如果then()方法调用resolve()方法,那么返回的Promise将会变成接收状态。
  4. 如果then()方法调用reject()方法,那么返回的Promise将会变成拒绝状态。
  5. 如果then()方法返回了一个未知状态(pending)的Promise新实例,那么返回的新Promise就是未知状态。
  6. 如果then()方法没有明确指定的resolve(data)/reject(data)/return data时,那么返回的新Promise就是接收状态,可以一层一层地往下传递。
let p =new Promise(function(resolve,reject){
    setTimeout(function(){
        let num = Math.random();
        //当随机数小于0.5,当前promise完成了执行
        if(num<0.5){
            resolve(num);
        }else{
            reject(num);
        }
        console.log('执行完成');
    },2000);
});
p.then(function(data){
    //用上次获得的数据执行相关的异步操作
},function(error){
    //出现错误,处理错误信息
});
let p =new Promise(function(resolve,reject){
    setTimeout(function(){
        resolve("hello");
        console.log('执行完成');
    },2000);
});
p.then(function(data){
    console.log(data);
}).then(function(){
    setTimeout(function(){
        console.log("过了5s,继续执行");
    },5000);
});
let p =new Promise(function(resolve,reject){
    setTimeout(function(){
        resolve("hello");
        console.log('执行完成');
    },2000);
});
p.then(function(data){
    console.log(data);
    //处理完数据之后,返回新的数据,给下次异步操作处理
    return "this is new data"
}).then(function(data){
    setTimeout(function(){
        console.log("过了5s,继续执行");
        console.log(data);
    },5000);
});

catch()

catch()方法和then()方法一样,都会返回一个新的Promise对象,它主要用于捕获异步操作时出现的异常。

因此,我们通常省略then()方法的第二个参数,把错误处理控制权转交给其后面的catch()函数。

下面的两段代码块,实现的功能是一样的。

let p =new Promise(function(resolve,reject){
    setTimeout(function(){
        let num = Math.random();
        //当随机数小于0.5,当前promise完成了执行
        if(num<0.5){
            resolve(num);
        }else{
            reject(num);
        }
        console.log('执行完成');
    },2000);
});
p.then(function(data){
    //用上次获得的数据执行相关的异步操作
},function(error){
    //出现错误,处理错误信息
});
let p =new Promise(function(resolve,reject){
    setTimeout(function(){
        let num = Math.random();
        if(num<0.5){
            resolve(num);
        }else{
            reject(num);
        }
        console.log('执行完成');
    },2000);
});
p.then(function(data){
    //用上次获得的数据执行相关的异步操作
}).catch(function(error){
    //处理错误信息
});

race()

传入参数为可迭代的对象,如数组

两个异步任务同时向同一个url发送请求,谁先得到数据,另外的那个异步任务获得的数据就会被丢弃

//2s后输出“执行完成1”
let p =new Promise(function(resolve){
    setTimeout(function(){
        resolve("hello");
        console.log('执行完成1');
    },2000);
});
//1s后输出“执行完成2”
let p1 =new Promise(function(resolve){
    setTimeout(function(){
        resolve("hello 2");
        console.log('执行完成2');
    },1000);
});
//两个异步任务同时开始
let mixedPromisesArray = [p,p1];
let p3 = Promise.race(mixedPromisesArray).then(data=>{
    //这里的data为hello 2,hello被丢弃
    console.log(data);
});

all()

参数也是可迭代的对象,如数组

一般用于几个任务同时并行运行的情况

当某个任务失败,状态就会变为reject

//2s后输出“执行完成1”
let p =new Promise(function(resolve){
    setTimeout(function(){
        resolve("hello");
        console.log('执行完成1');
    },2000);
});
//1s后输出“执行完成2”
let p1 =new Promise(function(resolve){
    setTimeout(function(){
        resolve("hello 2");
        console.log('执行完成2');
    },1000);
});
//两个异步任务同时开始
let mixedPromisesArray = [p,p1];
let p3 = Promise.all(mixedPromisesArray).then(data=>{
    //这里的data数组,存放着之前两个异步回调传的数据
    console.log(data);
});

参考

ES6关于Promise的用法
MDN Promise

posted @ 2019-09-19 15:05  我的人生  阅读(699)  评论(0编辑  收藏  举报