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

Question

大家晚上好！我的代码有一个小问题，无法正确解决。我需要通过回调函数将最简单的汤配方输出到控制台。请帮助提供建议。预先感谢！从在线教程和 YouTube 中，我了解到如果我们将一个函数作为参数传递给另一个函数，那么这是一个回调函数。// Put the water to boilfunction setWater(param){    console.log('We start to cook the soup. We put the water to warm.');    param();}// Chop the onionfunction cutOnion(param){    setTimeout(() => {        console.log('Chop the onion');        param();    }, 5000); }// Chop the carrotfunction 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 waterfunction putOnion(param){    setTimeout(() => {        console.log('Put the onion in the water');        param();    }, 12000); }// Put the carrot in the waterfunction putCarrot(param){    setTimeout(() => {        console.log('Put the carrot in the water');        param();    }, 14000); }// Soup Is Readyfunction 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 boil

function setWater(param) {

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

  fct = param.shift();

  fct(param);

}

// Chop the onion

function cutOnion(param) {

  setTimeout(() => {

    console.log('Chop the onion');

    fct = param.shift();

    fct(param);

  }, 1000);

}

// Chop the carrot

function 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 water

function putOnion(param) {

  setTimeout(() => {

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

    fct = param.shift();

    fct(param);

  }, 1000);

}

// Put the carrot in the water

function putCarrot(param) {

  setTimeout(() => {

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

    fct = param.shift();

    fct(param);

  }, 1000);

}

// Soup Is Ready

function soupIsReady() {

  setTimeout(() => {

    console.log('Soup is ready');

  }, 1000);

}

setWater([cutOnion, cutCarrot, waitForWater, putOnion, putCarrot, soupIsReady]);

.as-console-wrapper {min-height:100% !important; top:0;}