I have some JavaScript for three HTML divs,
mm
ss
pp
mm
ss
pp
mm
mm
pp
ss
mm
pp
ss
pp
pp
ss
mm
pp
ss
ss
ss
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);
}
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.