-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathapp.js
More file actions
63 lines (57 loc) · 1.97 KB
/
Copy pathapp.js
File metadata and controls
63 lines (57 loc) · 1.97 KB
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
// ******************************
// Multiple Awaits ******************************
// Example 1
console.log('Multiple Awaits')
const moveX = (element, amount, delay) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
const bodyBoundary = document.body.clientWidth
const elRight = element.getBoundingClientRect().right
const currLeft = element.getBoundingClientRect().left
if (elRight + amount > bodyBoundary) {
reject({ bodyBoundary, elRight, amount })
} else {
element.style.transform = `translateX(${currLeft + amount}px)`
resolve()
}
}, delay)
})
}
const btn = document.querySelector('button')
async function animateRight(el, amt) {
await moveX(el, amt, 1000)
await moveX(el, amt, 1000)
await moveX(el, amt, 1000)
await moveX(el, amt, 1000)
await moveX(el, amt, 1000)
await moveX(el, amt, 1000)
await moveX(el, amt, 1000)
await moveX(el, amt, 1000)
await moveX(el, amt, 1000)
}
animateRight(btn, 100).catch((err) => {
console.log('ALL DONE!!!')
animateRight(btn, -100)
})
// Compare this massive .then with async await
// const btn = document.querySelector('button')
// moveX(btn, 100, 1000)
// .then(() => moveX(btn, 100, 1000))
// .then(() => moveX(btn, 100, 1000))
// .then(() => moveX(btn, 100, 1000))
// .then(() => moveX(btn, 100, 1000))
// .then(() => moveX(btn, 100, 1000))
// .then(() => moveX(btn, 100, 1000))
// .then(() => moveX(btn, 100, 1000))
// .then(() => moveX(btn, 100, 1000))
// .then(() => moveX(btn, 100, 1000))
// .then(() => moveX(btn, 100, 1000))
// .then(() => moveX(btn, 100, 1000))
// .then(() => moveX(btn, 100, 1000))
// .then(() => moveX(btn, 100, 1000))
// .then(() => moveX(btn, 100, 1000))
// .then(() => moveX(btn, 100, 1000))
// .catch(({bodyBoundary, amount, elRight}) => {
// console.log(`Cannot Move! Body is ${bodyBoundary}px wide`);
// console.log(`Element is at ${elRight}px, ${amount}px is too large`);
// })