回调练习 Javascript

Question

我一直在练习回调，我得到了这个练习，我一直在为语法而苦苦挣扎。这是我的代码：

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]);

调用 doLaundry([wash,dry,fold]) 应该打印出以下内容：

wash dry fold Done!

通过调用此函数（需要工作）

function doLaundry() {
  // Call functions
}

我试过了，结果很接近，但语法错误或不需要：

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

在查看了其他简单教程后，我真的很困惑如何实现带回调的 doLaundry()。有什么解决方法的建议吗？

Answer 1

由于函数不需要是异步的，我认为你把它弄得比实际需要的要复杂得多。只需遍历操作（函数）数组并调用它们。然后在最后记录Done。

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]);

或者，如果您必须坚持使用异步函数，您可以从链中的最后一个开始构建回调链，然后使用 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]);

或者，为了更容易理解的方法，承诺每个回调并等待它们：

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]);

Answer 2

试试这个简单的代码：

只有一件事你要记住，如果我们在回调函数中传递参数，你必须在回调函数前面写一些这样的东西 ()=>

    function wash(dry) {
  console.log("wash");
  setTimeout(dry, 3000);
}
function dry(fold) {
  console.log("dry");
  setTimeout(fold, 2000);
}
function fold(done) {
  console.log("fold");
  console.log("done");
}

setTimeout(() => wash(() => dry(() => fold("done"))), 4000);

回调练习 Javascript

Callbacks Exercise Javascript

javascript

function

callback