I've decided to start sharing my journey to becoming a software developer on a regular basis to help keep me on track and network with others about their own learning journey.
This week learned about Async Javascript, Callback Hell, and the advantages of using Async/Await with Promises.
The links below show the callback hell code and the refactored rainbow backgroundColor code. Simple functionality but it highlights the readability when not having to nest functions and callbacks within functions and callbacks within functions and callbacks!
Before (Callback Hell)
//First way to do consecutive callbacks
// setTimeout (function(){
// document.body.style.backgroundColor = 'red';
// }, 1000)
// setTimeout (function(){
// document.body.style.backgroundColor = 'orange';
// }, 2000)
// setTimeout (function(){
// document.body.style.backgroundColor = 'yellow';
// }, 3000)
//--------------------------------------------------------------------------
//Second way to run consecutive callbacks, but this time they are nested
// setTimeout (function(){
// document.body.style.backgroundColor = 'red';
// setTimeout (function(){
// document.body.style.backgroundColor = 'orange';
// setTimeout (function(){
// document.body.style.backgroundColor = 'yellow';
// }, 1000)
// }, 1000)
// }, 1000)
//--------------------------------------------------------------------------
//Third way, create a function for callbacks where you pass in a color and timer
const delayedColorChange = function(newColor, delay, doNext){
setTimeout(function(){
document.body.style.backgroundColor = newColor;
doNext && doNext();
}, delay)
}
delayedColorChange('red', 1000, function(){
delayedColorChange('orange', 1000, function(){
delayedColorChange('yellow', 1000, )
})
});
//---------------------------------------------------------------------------
//This is an example of real world nested callbacks
searchMoviesAPI('FindingNemo', function(){
saveToMyDatabase(movies, function(){
//if it works, run this:
}, function(){
//if it doesn't work, run this:
})
}, function(){
//if API is down or the request failed, run this:
});
After (Async)
//This is the promise
const delayedColorChange = function(color, delay){
return new Promise(function(resolve, reject){
setTimeout(function(){
document.body.style.backgroundColor = color;
resolve();
}, delay)
})
}
async function rainbow(){
await delayedColorChange('red', 1000)
await delayedColorChange('orange', 1000)
await delayedColorChange('yellow', 1000)
await delayedColorChange('green', 1000)
await delayedColorChange('blue', 1000)
await delayedColorChange('indigo', 1000)
await delayedColorChange('violet', 1000)
return 'All done!'
}
rainbow().then(function(){
console.log('End of the rainbow!')
})
//Here's using another async function but waiting until after rainbow() has run
async function printRainbow(){
await rainbow();
console.log('Rainbow has finished running.')
}
printRainbow();
I hope you enjoyed the read!
Feel free to follow me on GitHub, LinkedIn and DEV for more!
Top comments (0)