-3

Analisando o código abaixo:

function rand(min = 1000, max = 3000){
    return Math.floor(Math.random() * (max - min) + min)
}

function f1(callback){
    setTimeout(function(){
        console.log('f1')
        if(callback)
            callback()
    }, rand())
}

function f2(callback){
    setTimeout(function(){
        console.log('f2')
        if(callback)
            callback()
    , rand()})
}

function f3(callback){
    setTimeout(function(){
        console.log('f3')
        if(callback)
            callback()
    }, rand())
}

f1(function(){
    f2(function(){
        f3(function(){
            console.log('Terminei')
        })
    })
})

A função rand() é responsável por gerar um número aleatório entre 1000 e 3000. Abaixo dela, defino três funções - f1(), f2() e f3() - que recebem uma callback e, caso seja enviada uma callback na invocação da função, essa é chamada/executada somente após a função exibir o console.log().

É importante perceber que, em cada função - f1(), f2() e f3() - há uma chamada à função setTimeout(), passando para ela um tempo aleatório, entre 1 e 3 segundos. Fiz isso para simular uma situação real, na qual não sabemos o tempo necessário para o término de uma tarefa feita por uma função.

Terminando a declaração das funções, então invoco as três funções, de forma aninhada, usando funções anônimas, e passando para elas a próxima função a ser executada (em forma de callback). O meu intuito é fazer com que o resultado produzido pelo script seja, SEMPRE:

 "f1"
 "f2"
 "f3"
 "Terminei."

Ou seja, nesse caso, quero que a palavra "Terminei" seja exibida na tela somente quando f3() tiver exibido seu texto, f2() tiver exibido o seu, e f1() também. Em outras palavras, quero que, embora f1() leve 1 hora para ser executada (devido ao tempo aleatório configurado em setTimeout()), f2() terá que esperá-la para exibir seu texto e f3() também terá que esperar por f2().

E é exatamente esse resultado que obtenho quando chamo essas funções em forma da callback hell, como visto no código. Elas sempre executam em ordem. Mas tem um problema, se eu não usar função anônima no argumento das funções, a execução delas fica fora de ordem e eu gostaria de entender o porquê.

Se, agora, eu as chamar assim, sem o uso de funções anônimas:

f1(f2(f3(console.log('Terminei')))

a ordem desejada não é obedecida, sendo que, a meu ver, é a mesma chamada anterior, com a diferença de que não usei funções anônimas como argumento.

0

1 Resposta 1

3

Seu problema é que suas funções f1, f2, e f3 esperam uma função nos seus argumentos, porém elas não retornam nada.

Então, se você usar f1(f2(f3(...))), por exemplo, o resultado de f3 que será passado pra f2 é undefined, já que f3 não retorna nada.

Exatamente o mesmo problema é com o trecho do console.log. A função f3 está esperando outra função como argumento, porém console.log está sendo invocado e retornando undefined, dessa forma nenhuma função é passada para ser o callback de f3.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .