Javascript, Promises e setTimeout

Tenho brincado com Promises, mas estou tendo problemas para entender o que está acontecendo com o seguinte código:

const promise = new Promise((resolve, reject) => {
  console.log('Promise started - Async code started')
  setTimeout(() => {
    resolve('Success')
  }, 10)
})

setTimeout(() => {
  console.log('Promise log inside first setTimeout')
}, 0)

promise.then(res => {
  console.log('Promise log after fulfilled')
})

console.log('Promise made - Sync code terminated')

setTimeout(() => {
  console.log('Promise log inside second setTimeout')
}, 0)

O resultado é:

Promise started - Async code started 
Promise made - Sync code terminated 
Promise log inside first setTimeout 
Promise log inside second setTimeout 
Promise log after fulfilled

É o esperado.

Mas vamos verificar a saída do código abaixo:

const promise = new Promise((resolve, reject) => {
  console.log('Promise started - Async code started')
  setTimeout(() => {
    resolve('Success')
  }, 1)
})

setTimeout(() => {
  console.log('Promise log inside first setTimeout')
}, 0)

promise.then(res => {
  console.log('Promise log after fulfilled')
})

console.log('Promise made - Sync code terminated')
setTimeout(() => {
  console.log('Promise log inside second setTimeout')
}, 0)

Alterado o valor do temporizador setTimeout da promessa a ser resolvido de 10ms para 1ms

O resultado é:

Promise started - Async code started 
Promise made - Sync code terminated 
Promise log after fulfilled 
Promise log inside first setTimeout 
Promise log inside second setTimeout 

Alguma explicação para isso?

Vou usar o seguinte exemplo para explicar:

setTimeout(() => {
  console.log('1 ms timeout');
}, 1);                            // Moved to async queue at time = T0
setTimeout(() => {
  console.log('0 ms timeout')
}, 0);                            // Moved to async queue after 1 ms that synchronous call to setTimeout takes i.e. at T1
                                  // So at T1, queue will be [("1ms timeout", 0), ("0ms timeout", 0)]

Portanto, isso irá imprimir

1 ms timeout
0 ms timeout

Entendimento do acima: Chamar setTimeouts é síncrono (mesmo que seu retorno de chamada seja colocado na fila assíncrona), ou seja, chamamos setTimeout () e passamos para a próxima instrução - essa ação síncrona pode levar 1 ms.

Em outras palavras, 1 ms é um tempo muito baixo, então, no momento em que o mecanismo JS vê a segunda instrução assíncrona, a primeira já passou 1 ms na fila.

Eu também sugiro que você experimente o seguinte

setTimeout(() => {
  console.log("First");
}, 2);                      // queue at T0 = [("First", 2)]

const forLoopLimit = 100;
for (var i = 0; i < forLoopLimit; i++){
    console.log(i * 10000);
}                           // Assume that it takes about 3 milliseconds
                            // queue at T3 = [("First", 0)]
setTimeout(() => {
  console.log("Second");
}, 0);                      // Assume it takes 0 milliseconds.
                            // queue at T4 = [("First", 0), ("Second", 0)]

Isso será impresso Firstantes Second, embora o primeiro tenha um tempo limite de 2 ms em comparação com o último tendo 0 ms. Agora mude forLoopLimitpara 1 ou até 10, você verá que a tarefa síncrona não leva 3 milissegundos agora, e Secondé impressa antesFirst

Também vale a pena tentar:

console.log(Date.now());
console.log(Date.now());

Tente acima várias vezes e você verá que às vezes os logs do console têm carimbos de data / hora diferentes. Aproximadamente, você pode dizer console.log()e Date.now()levar 0,5 ms. Não é nada além da hora de chamar / executar coisas síncronas.

Do modelo de simultaneidade e do loop de eventos

• setTimeout não é executado imediatamente após o tempo expirar
• Atraso zero não significa que a chamada de retorno será disparada após zero milissegundos. Chamar setTimeoutcom um atraso de 0 (zero) milissegundos não executa a função de retorno de chamada após o intervalo determinado. Basicamente, é setTimeoutnecessário esperar que todo o código das mensagens enfileiradas seja concluído, mesmo que você tenha especificado um determinado limite de tempo para seu setTimeout.

O que aconteceria se definirmos 2 e 1 milissegundos:

const promise = new Promise((resolve, reject) => {
  console.log('Promise started - Async code started')
  setTimeout(() => {
    resolve('Success')
  }, 2)
})

console.log('Promise log inside first setTimeout 1')
setTimeout(() => {
  console.log('Promise log inside first setTimeout 2')
}, 1)

promise.then(res => {
  console.log('Promise log after fulfilled ❌')

})

console.log('Promise log inside second setTimeout 1')
setTimeout(() => {
  console.log('Promise log inside second setTimeout 2')
}, 1)
});

A saída sempre será:

Promise started - Async code started
Promise log inside first setTimeout 1
Promise log inside second setTimeout 1
Promise log inside first setTimeout 2
Promise log inside second setTimeout 2
Promise log after fulfilled ❌

Conclusão

Se você quer um comportamento adequado, vale a pena se livrar dos atrasos Zero.

O Chrome tem um tempo limite mínimo codificado de 1 ms .

  base::TimeDelta interval_milliseconds =
      std::max(base::TimeDelta::FromMilliseconds(1), interval);

Portanto, para o Chrome, todos os seus setTimeout( fn , 0 )são convertidos para setTimeout( fn , 1 )e, portanto, programados para disparar após o primeiro programado (lembre-se que os construtores do Promise são chamados de forma síncrona).

Então, poderíamos realmente simplificar seu exemplo com

setTimeout( () => console.log( '1ms delay' ), 1 );
setTimeout( () => console.log( '0ms delay' ), 0 );

e no Chrome , o 1msatraso sempre disparará primeiro, ao contrário do bom senso porque internamente será:

setTimeout( () => console.log( '1ms delay' ), Math.max(1, 1) );
setTimeout( () => console.log( '0ms delay' ), Math.max(1, 0) );

Se você tivesse definido como 1e em 2vez de 0e 1, sua expectativa seria satisfeita.

const promise = new Promise((resolve, reject) => {
  console.log('Promise started - Async code started')
  setTimeout(() => {
    resolve('Success')
  }, 2)
})

setTimeout(() => {
  console.log('Promise log inside first setTimeout')
}, 1)

promise.then(res => {
  console.log('Promise log after fulfilled')
})

console.log('Promise made - Sync code terminated')
setTimeout(() => {
  console.log('Promise log inside second setTimeout')
}, 1)