Javascript Question
Cleaning up some ridiculous JavaScript code
I have some JavaScript for three HTML divs,
mmssppIf
mm- hides, then
ss - hides, then
pp - hides, then
mm - divs get updated, then
- shows, then
mm - shows, then
pp - shows, then
ss
If
mmpp- hides, then
ss - hides, then
pp - divs get updated, then
- shows, then
pp - shows, then
ss
If
mmppss- hides, then
ss - divs get updated, then
- shows, then
ss
I have this code running, but it's extremely cumbersome, and I'm wondering if there is a better way to do what I am doing:
if ($('#mm').html() != mm) {
hideElem('.score');
setTimeout(function() {
hideElem('.player');
setTimeout(function() {
hideElem('.match');
setTimeout(function() {
updateElems();
setTimeout(function() {
showElem('.match');
setTimeout(function() {
showElem('.player');
setTimeout(function() {
showElem('.score');
}, inSpeed);
}, inSpeed);
}, outSpeed);
}, outSpeed);
}, outSpeed);
}, outSpeed);
} else if ($('#pp').html() != pp) {
hideElem('.score');
setTimeout(function() {
hideElem('.player');
setTimeout(function() {
updateElems();
setTimeout(function() {
showElem('.player');
setTimeout(function() {
showElem('.score');
}, inSpeed);
}, outSpeed);
}, outSpeed);
}, outSpeed);
} else if ($('#ss').html() != ss) {
hideElem('.score');
setTimeout(function() {
updateElems();
setTimeout(function() {
showElem('.score');
}, outSpeed);
}, outSpeed);
}
The reason for the setTimeouts are because of all the animations.
Answer Source
Use Promises and async/await.
Your code could look like this:
const wait = ms => new Promise(resolve => setTimeout(resolve, ms))
;(async () => {
if ($('#mm').html() !== mm) {
hideElem('.score')
await wait(outSpeed)
hideElem('.player')
await wait(outSpeed)
hideElem('.match')
await wait(outSpeed)
updateElems()
await wait(outSpeed)
showElem('.match')
await wait(inSpeed)
showElem('.player')
await wait(inSpeed)
showElem('.score')
} else if ($('#pp').html() !== pp) {
hideElem('.score')
await wait(outSpeed)
hideElem('.player')
await wait(outSpeed)
updateElems()
await wait(outSpeed)
showElem('.player')
await wait(inSpeed)
showElem('.score')
} else if ($('#ss').html() !== ss) {
hideElem('.score')
await wait(outSpeed)
updateElems()
await wait(outSpeed)
showElem('.score')
}
})()
async/await is not yet supported in any browser beside Edge (and Chrome with flag), so you have to use Babel to compile your code.