Nested Promise with return

These show how promises can be nested which return a promise. Makes code clean as promises are chained rather than nested.

by Saksham Malhotra

HTML

<div class="myDay">
</div>

JavaScript

$(function() {
  let wakeUp = function() {
    return new Promise(function(resolve, reject) {
      $('.myDay').append('<div>I woke up</div>');
      setTimeout(function() { 
      resolve();
      }, 1000)
    })
  }

  let brushTeeth = function() {
    return new Promise(function(resolve, reject) {
      $('.myDay').append('<div>I brushed my teeth</div>');
      setTimeout(function() { 
      resolve();
      }, 3000)
    })
  }

  let takeBath = function() {
    return new Promise(function(resolve, reject) {
      $('.myDay').append('<div>I took bath</div>');
      setTimeout(function() { 
      resolve();
      }, 2000)
    })
  }

  wakeUp().then(function() {
    return brushTeeth();
  }).then(function() {
    return takeBath();
  }).then(function() {
    $('.myDay').append('<div>Day Complete</div>');
  })
})