在这个例子中如何使用回调函数？

Question

大家晚上好！我的代码有一个小问题，无法正确解决。我需要通过回调函数将最简单的汤配方输出到控制台。请帮助提供建议。预先感谢！

从在线教程和 YouTube 中，我了解到如果我们将一个函数作为参数传递给另一个函数，那么这是一个回调函数。

// Put the water to boil

function setWater(param){

    console.log('We start to cook the soup. We put the water to warm.');

    param();

}

// Chop the onion

function cutOnion(param){

    setTimeout(() => {

        console.log('Chop the onion');

        param();

    }, 5000); 

}

// Chop the carrot

function cutCarrot(param){

    setTimeout(() => {

        console.log('Chop the carrot');

        param();

    }, 6000); 

}

// We are waiting for the water to boil.

function waitForWater(param){

    setTimeout(() => {

        console.log('We are waiting for the water to boil.');

        param();

    }, 10000); 

}

// Put the onion in the water

function putOnion(param){

    setTimeout(() => {

        console.log('Put the onion in the water');

        param();

    }, 12000); 

}

// Put the carrot in the water

function putCarrot(param){

    setTimeout(() => {

        console.log('Put the carrot in the water');

        param();

    }, 14000); 

}

// Soup Is Ready

function soupIsReady(){

    setTimeout(() => {

        console.log('Soup is ready');

    }, 20000); 

}

setWater(cutOnion);

cutOnion(cutCarrot);

cutCarrot(waitForWater);

waitForWater(putOnion);

putOnion(putCarrot);

putCarrot(soupIsReady)

我需要在计时器上依次执行这些功能。

Answer 1

您可以使用reduceRight将回调链累积到一个函数中，然后调用它。通过这种方式，您可以避免通常所说的“回调地狱”：[setWater, cutOnion, waitForWater, putOnion, putCarrot, soupIsReady].reduceRight((acc, f) =>     () => f(() => acc()))();function setWater(param){ console.log('We start to cook the soup. We put the water to warm.'); param();}function cutOnion(param){ setTimeout(() => { console.log('Chop the onion'); param(); }, 500); }function cutCarrot(param){ setTimeout(() => { console.log('Chop the carrot'); param(); }, 600); }function waitForWater(param){ setTimeout(() => { console.log('We are waiting for the water to boil.'); param(); }, 1000); }function putOnion(param){ setTimeout(() => { console.log('Put the onion in the water'); param(); }, 1200); }function putCarrot(param){ setTimeout(() => { console.log('Put the carrot in the water'); param(); }, 1400); }function soupIsReady(){ setTimeout(() => { console.log('Soup is ready'); }, 2000); }出于演示的目的，我减少了所有延迟，因此这些步骤会更快地相互跟进。

Answer 2

function callback(){    setWater(function() {         cutOnion(function(){            cutCarrot(function(){                waitForWater(function(){                    putOnion(function(){                        putCarrot(function(){                            soupIsReady();                        });                    });                });            });        });    });}

Answer 3

我看到这样的东西......// Put the water to boilfunction setWater(param) {  console.log('We start to cook the soup. We put the water to warm.');  fct = param.shift();  fct(param);}// Chop the onionfunction cutOnion(param) {  setTimeout(() => {    console.log('Chop the onion');    fct = param.shift();    fct(param);  }, 1000);}// Chop the carrotfunction cutCarrot(param) {  setTimeout(() => {    console.log('Chop the carrot');    fct = param.shift();    fct(param);  }, 1000);}// We are waiting for the water to boil.function waitForWater(param) {  setTimeout(() => {    console.log('We are waiting for the water to boil.');    fct = param.shift();    fct(param);  }, 1000);}// Put the onion in the waterfunction putOnion(param) {  setTimeout(() => {    console.log('Put the onion in the water');    fct = param.shift();    fct(param);  }, 1000);}// Put the carrot in the waterfunction putCarrot(param) {  setTimeout(() => {    console.log('Put the carrot in the water');    fct = param.shift();    fct(param);  }, 1000);}// Soup Is Readyfunction soupIsReady() {  setTimeout(() => {    console.log('Soup is ready');  }, 1000);}setWater([cutOnion, cutCarrot, waitForWater, putOnion, putCarrot, soupIsReady]);.as-console-wrapper {min-height:100% !important; top:0;}