Day 19: Async JS: Event Loop, Callbacks & Promises

console.log('1. Take the order');
setTimeout(() => console.log('3. Sweets are ready (after 0 ms!)'), 0);
console.log('2. Take the next customer’s order');

console.log('A: script start');
setTimeout(() => console.log('E: setTimeout (task)'), 0);
Promise.resolve().then(() => console.log('C: promise.then (microtask)'));
queueMicrotask(() => console.log('D: queueMicrotask'));
console.log('B: script end');

let seconds = 3;
const id = setInterval(() => {
  console.log(`OTP expires in ${seconds}s`);
  seconds--;
  if (seconds === 0) {
    clearInterval(id);                    // always stop intervals
    console.log('OTP expired – request a new one');
  }
}, 100);                                  // 100 ms here so the demo is quick

const reminder = setTimeout(() => console.log('This never prints'), 500);
clearTimeout(reminder);                   // cancelled before it fired

// Pretend server functions that take time and call us back
function getUser(id, cb)      { setTimeout(() => cb(null, { id, name: 'Aarti' }), 50); }
function getOrders(user, cb)  { setTimeout(() => cb(null, [{ id: 1042, total: 1800 }]), 50); }
function getInvoice(order, cb) { setTimeout(() => cb(null, `Invoice for #${order.id}: ₹${order.total}`), 50); }

getUser(7, (err, user) => {
  if (err) return console.log(err);
  getOrders(user, (err, orders) => {
    if (err) return console.log(err);
    getInvoice(orders[0], (err, invoice) => {      // the "pyramid of doom" grows →
      if (err) return console.log(err);
      console.log(user.name, '→', invoice);
    });
  });
});

// A promise = an object that will hold a future result: pending → fulfilled OR rejected
function bakeGhewar(kg) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (kg > 20) reject(new Error('We can make at most 20 kg today'));
      else resolve(`${kg} kg ghewar ready`);
    }, 100);
  });
}

bakeGhewar(5)
  .then(result => { console.log('✅', result); return bakeGhewar(50); })   // return → chain the next step
  .then(result => console.log('never printed', result))
  .catch(err => console.log('❌', err.message))                            // one catch for the whole chain
  .finally(() => console.log('Kitchen closed for today'));

const wait = (ms, value) => new Promise(resolve => setTimeout(() => resolve(value), ms));
const getUser = id => wait(50, { id, name: 'Aarti' });
const getOrders = user => wait(50, [{ id: 1042, total: 1800 }]);
const getInvoice = order => wait(50, `Invoice for #${order.id}: ₹${order.total}`);

let currentUser;
getUser(7)
  .then(user => { currentUser = user; return getOrders(user); })
  .then(orders => getInvoice(orders[0]))
  .then(invoice => console.log(currentUser.name, '→', invoice))
  .catch(err => console.log('Something failed:', err.message));   // flat, one error handler

const wait = (ms, v, fail) => new Promise((res, rej) => setTimeout(() => (fail ? rej(new Error(v)) : res(v)), ms));

const menu = wait(120, 'menu');
const offers = wait(80, 'offers');
const reviews = wait(100, 'reviews');

console.time('all');
Promise.all([menu, offers, reviews]).then(r => { console.log('all:', r); console.timeEnd('all'); });   // ~120 ms, not 300

Promise.allSettled([wait(50, 'menu'), wait(60, 'reviews API down', true)])
  .then(results => console.log('allSettled:', results.map(r => r.status + ':' + (r.value ?? r.reason.message)).join(', ')));

Promise.race([wait(200, 'slow server'), wait(90, 'timeout – show cached menu')])
  .then(winner => console.log('race:', winner));

Promise.any([wait(70, 'mirror 1 down', true), wait(110, 'mirror 2 OK')])
  .then(first => console.log('any:', first));

<button id="go">Place order</button>
<ol id="steps"></ol>

<script>
const wait = ms => new Promise(r => setTimeout(r, ms));
const steps = document.querySelector('#steps');
function show(text) { const li = document.createElement('li'); li.textContent = text; steps.append(li); }

document.querySelector('#go').addEventListener('click', e => {
  e.target.disabled = true;
  steps.innerHTML = '';
  show('🧾 Order received');
  wait(800)
    .then(() => { show('👩‍🍳 Sweets being packed'); return wait(1000); })
    .then(() => { show('🛵 Out for delivery'); return wait(1200); })
    .then(() => show('✅ Delivered – enjoy!'))
    .finally(() => { e.target.disabled = false; });
});
</script>