Callbacks Exercise Javascript

Issue

I have been exercising callbacks and I got this exercise that I have been struggling with the syntax. Here is my code:

function wash(callback) {
  setTimeout(function() {
    console.log('wash');
    callback();
  }, 3000);
}

function dry(callback) {
  setTimeout(function() {
    console.log('dry');
    callback();
  }, 2000);
}

function fold(callback) {
  setTimeout(function() {
    console.log('fold');
    callback();
  }, 1000);
}
  
doLaundry([wash, dry, fold]);

Invoking the doLaundry([wash,dry,fold]) is supposed to print out the following:

wash dry fold Done!

by calling this function (needs work)

function doLaundry() {
  // Call functions
}

I tried this and it was close but the syntax is wrong or uneeded:

  function doLaundry(actions, callback) {
          actions.forEach((item, index) => {
            wash(item, (error) => dry(item, (error) => fold(item, (error) => {})));
          });
        }

I’m really confused how to implement the doLaundry() with callback after checking out other simple tutorials. Any suggestions how to approach this?

Solution

Since the functions don’t need to be asynchronous, I think you’re making this a lot more complicated than it needs to be. Just iterate through the array of actions (functions) and call them. Then log Done at the end.

function wash() {
  console.log('wash');
}

function dry() {
  console.log('dry');
}

function fold() {
  console.log('fold');
}

const doLaundry = (fns) => {
  fns.forEach(fn => {
    fn();
  });
  console.log('Done!');
}

doLaundry([wash, dry, fold]);

Or, if you must stick with the asynchronous functions, you can build up the callback chain starting from the last one in the chain and going backwards with reduceRight:

function wash(callback) {
  setTimeout(function() {
    console.log('wash');
    callback();
  }, 3000);
}

function dry(callback) {
  setTimeout(function() {
    console.log('dry');
    callback();
  }, 2000);
}

function fold(callback) {
  setTimeout(function() {
    console.log('fold');
    callback();
  }, 1000);
}

const doLaundry = (fns) => {
  const firstCallback = () => console.log('done');
  const firstFn = fns.reduceRight(
    (nextCallback, fn) => () => fn(nextCallback),
    firstCallback
  );
  firstFn();
}

doLaundry([wash, dry, fold]);

Or, for an easier to understand approach, promisify each callback and await them:

function wash(callback) {
  setTimeout(function() {
    console.log('wash');
    callback();
  }, 3000);
}

function dry(callback) {
  setTimeout(function() {
    console.log('dry');
    callback();
  }, 2000);
}

function fold(callback) {
  setTimeout(function() {
    console.log('fold');
    callback();
  }, 1000);
}

const toProm = fn => new Promise(resolve => fn(resolve));
const doLaundry = async (fns) => {
  for (const fn of fns) {
    await toProm(fn);
  }
  console.log('done');
}

doLaundry([wash, dry, fold]);

Answered By – CertainPerformance

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published