-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathPromise.html
140 lines (107 loc) · 2.51 KB
/
Promise.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<script type="text/javascript">
/*
div.move({left:'10px'},function(){
div.move({top:'10px'},function(){
div.move({fontSize:'100px'},function(){
div.move({opacity:.5},function(){
});
});
});
});
div.move({left:'10px'})
div.move({top:'10px'})
div.move({fontSize:'100px'})
Promise对象有以下两个特点。
1.
Promise对象代表一个异步操作，有三种状态：
Pending（进行中）、
Resolved（已完成，又称 Fulfilled）
和Rejected（已失败）。
2.
一旦状态改变，就不会再变.
catch
*/
var a = null;
//
// setTimeout(function(){
// a = 10;
// },1000);
//
// alert(a);
// var p = new Promise(function(success,error){
//
// setTimeout(function(){
// a = 10;
// if(a){
// success(a);
// }else{
// error('失败');
// }
// },1000);
//
// });
//
// p.then(function(value){
// alert(value);
// },function(val){
// alert(val);
// });
const arr = [
'https://i.loli.net/2017/07/28/597b45679c5fe.jpg',
'https://i.loli.net/2017/07/28/597b4567c3e2a.jpg',
'https://i.loli.net/2017/07/28/597b4567e2547.jpg',
'https://i.loli.net/2017/07/28/597b4567e6e8c.jpg',
'https://i.loli.net/2017/07/28/597b45679c5fe.jpg',
'https://i.loli.net/2017/07/28/597b4567c3e2a.jpg',
'https://i.loli.net/2017/07/28/597b4567e2547.jpg',
'https://i.loli.net/2017/07/28/597b4567e6e8c.jpg'
];
function load(url){
return new Promise(function(success,fail){
var img = new Image();
img.src = url;
//当这张图片加载完成时
img.onload = function(){
success(img);
}
img.onerror = function(){
fail(new Error);
}
});
}
var l = load(arr[0]);
// l.then(function(img){
//// console.log(img)
// document.body.appendChild(img);
//
// },function(data){
// console.log(data)
// });
//出错以后会进catch
// l.catch(function(data){
// console.log(data);
// });
Promise.all([load(arr[0]),load(arr[1]),load(arr[2]),load(arr[3]),load(arr[4]),load(arr[5])]).then(function(arr){
for(var i=0;i<arr.length;i++){
document.body.appendChild(arr[i]);
}
console.log('所有的都加载完毕');
}).catch(function(v){
console.log(v);
});
/*
用户等级:
一个接口 ：用户的name 用户的iphone
用户的name需要一个接口 5分钟
用户的iphone需要一个接口 30ms
*/
</script>
</body>
</html>