promise.all()
- 說明：all() 表示獲取所有回調(diào)函數(shù)
代碼1：
以下promise是簡寫
var p1 = Promise.resolve("成功1");
var p2 = Promise.resolve("成功2");
var p3 = Promise.resolve("成功3");
var p4 = Promise.resolve("成功4");
var arr = [p1,p2,p3,p4];
var result = Promise.all(arr);
result.then(function(res) {
console.log(res);// Array(4)
})
控制臺：
image.png
- all()一個例子（滾動條）：
技術(shù)棧：bootstrap,jquery
引入：bootstrap.css和jquery文件
提示：代碼中圖片一共8張.jpg格式，圖片名字分別是1,2,3,4,5,6,7,8,自己準備圖片
源代碼：
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
</head>
<body>
<!-- 同時請求多個數(shù)據(jù)，并且在多個數(shù)據(jù)完成之后在執(zhí)行什么代碼 -->
<img class="loading" src="img/loading1.gif" >
<!-- boostrap滾動條 -->
<div class="progress">
<div class="progress-bar progress-bar-striped active" style="width: 0%"><!-- boostrap滾動條 -->
</div>
</div>
</body>
<script src="js/jquery-1.11.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
num = 0;
var pList = [];
for(let i = 0; i < 8; i++) {//塊級
let p = new Promise(function(resovle,reject) {
let img = new Image();
img.src = "img/" + (i+1) + ".jpg";// 圖片名稱依次為：1 2 3 4 5...
img.onload = function() {
resovle(img);
}
})
// 圖片加載進度條
p.then(function() {
num++;
var percent = parseInt(num/8*100);
document.querySelector(".progress-bar").style.width = percent + "%";//獲取文檔中 class="demo" 的元素
})
pList.push(p);
}
// 所有圖片加載完成處理事件（remove）
let pAll = Promise.all(pList);
pAll.then(function(res) {
console.log("所有圖片加載完成");
console.log(res);
})
-
效果圖
圖片已經(jīng)全部加載
image.png
promise.race()
- 說明：race() 表示獲取其中一個回調(diào)函數(shù)就返回
參考promise.all()之后，把代碼修改如下1：
var p1 = Promise.resolve("成功1");
var p2 = Promise.resolve("成功2");
var p3 = Promise.resolve("成功3");
var p4 = Promise.resolve("成功4");
var arr = [p1,p2,p3,p4];
var result = Promise.race(arr);
result.then(function(res) {
console.log(res);// 成功1
})
控制臺：
image.png
2.在看一個race()例子
var p1 = new Promise(function(resolve,reject){
setTimeout(function(){
resolve("450毫秒后執(zhí)行")
},450)
})
var p2 = new Promise(function(resolve,reject){
setTimeout(function(){
resolve("300毫秒后執(zhí)行")
},300)
})
var p3 = new Promise(function(resolve,reject){
setTimeout(function(){
resolve("400毫秒后執(zhí)行")
},400)
})
var p4 = new Promise(function(resolve,reject){
setTimeout(function(){
resolve("500毫秒后執(zhí)行")
},500)
})
var arr = [p1,p2,p3,p4]
//有多個異步操作,只有1個返回給結(jié)果,就立即執(zhí)行.
var result = Promise.race(arr)
result.then(function(res){
console.log(res)
})
打印什么？因為使用race()方法: 有多個異步 操作時，只要有一個返回結(jié)果，就立即執(zhí)行代碼；
又代碼中使用了定時器函數(shù)setTimeout，所以打印結(jié)果如下：
image.png
