Javascript, Promises i setTimeout

Bawiłem się Obietnicami, ale mam problem ze zrozumieniem, co się dzieje z następującym kodem:

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)

Wynik to:

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

Jest zgodnie z oczekiwaniami.

Ale sprawdźmy wyjście poniższego kodu:

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)

Zmieniono wartość timera setTimeout, która ma być rozwiązana, z 10 ms na 1 ms

Wynik to:

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

Jakieś wyjaśnienie?

Posłużę się następującym przykładem, aby wyjaśnić:

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

Dlatego to się wydrukuje

1 ms timeout
0 ms timeout

Zrozumienie powyższego: Wywołanie setTimeouts jest synchroniczne (mimo że jego callback jest umieszczony w kolejce asynchronicznej), tj. Wywołujemy setTimeout () i przechodzimy do następnej instrukcji - ta synchroniczna akcja może zająć 1 ms.

Innymi słowy, 1 ms to zbyt krótki czas, więc zanim silnik JS zobaczy drugą instrukcję asynchroniczną, pierwsza z nich spędzi już 1 ms w kolejce.

Proponuję również wypróbować poniższe

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

Wydrukuje się to Firstwcześniej, Secondmimo że pierwszy miał limit czasu 2 ms, podczas gdy drugi miał 0 ms. Teraz zmień forLoopLimitna 1 lub nawet 10, zobaczysz, że zadanie synchroniczne nie zajmuje teraz 3 milisekund i Secondjest drukowane wcześniejFirst

Warto również spróbować:

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

Spróbuj wiele razy, a zobaczysz, że czasami dzienniki konsoli będą miały różne sygnatury czasowe. Z grubsza możesz powiedzieć console.log()i Date.now()wziąć 0,5 ms. To nic innego jak czas na wywołanie / wykonanie synchronicznych rzeczy.

Z modelu współbieżności i pętli zdarzeń

• setTimeout nie działa natychmiast po wygaśnięciu jego licznika czasu
• Zerowe opóźnienie w rzeczywistości nie oznacza, że ​​oddzwonienie wyłączy się po zerowych milisekundach. Wywołanie setTimeoutz opóźnieniem 0 (zero) milisekund nie powoduje wykonania funkcji zwrotnej po podanym interwale. Zasadniczo setTimeouttrzeba czekać na zakończenie całego kodu dla komunikatów w kolejce, mimo że określono konkretny limit czasu dla setTimeout.

Co się stanie, jeśli ustawimy 2 i 1 milisekundę:

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

Wynik zawsze będzie:

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 ❌

Wniosek

Jeśli chcesz odpowiedniego zachowania, warto pozbyć się Zero opóźnień.

Chrome ma zakodowany na stałe minimalny limit czasu 1 ms .

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

Tak więc w przypadku Chrome wszystkie twoje setTimeout( fn , 0 )są konwertowane setTimeout( fn , 1 ), a zatem zaplanowane do uruchomienia po pierwszym, który zaplanowałeś (pamiętaj, że konstruktory Promise są wywoływane synchronicznie).

Moglibyśmy więc uprościć Twój przykład za pomocą

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

i w Chrome The 1msopóźnienie będzie zawsze ogień pierwszy, wbrew zdrowemu rozsądkowi, ponieważ wewnętrznie będzie faktycznie być:

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

Gdybyś miał to ustawione na 1i 2zamiast 0i 1, twoje oczekiwanie zostałoby spełnione.

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)