-
Notifications
You must be signed in to change notification settings - Fork 0
/
browser.html
80 lines (68 loc) · 1.67 KB
/
browser.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>promise demo</title>
<style type="text/css">
h1, p, ul, li {
margin: 0;
padding: 0;
}
li {
text-align: center;
line-height: 100px;
width: 150px;
height: 100px;
border: 1px solid #DDD;
margin-bottom: 10px;
}
img {
max-width: 150px;
max-height: 100px;
}
</style>
</head>
<body>
<h1>promise demo</h1>
<p><button id="run">run demo</button></p>
<h4></h4>
<ul id="list"></ul>
<p id="done" style="display: none;">done!</p>
<script src="jquery-1.8.3.min.js"></script>
<script src="Promise.js"></script>
<script src="browser.js"></script>
<script>
window.onload = function() {
function addImg(img) {
$('#list').find('> li:last-child').html('').append(img);
};
function prepend() {
$('<li>')
.html('loading...')
.appendTo($('#list'));
};
function run() {
$('#done').hide();
getData('map.json')
.then(function(data) {
$('h4').html(data.name);
return data.list.reduce(function(promise, item) {
return promise
.then(prepend)
.then(sleep(1000))
.then(function() {
return getImg(item.url);
})
.then(addImg);
}, Promise.resolve());
})
.then(sleep(300))
.then(function() {
$('#done').show();
});
};
$('#run').on('click', run);
};
</script>
</body>
</html>