Javascript, обещания и setTimeout

Я играл с обещаниями, но мне трудно понять, что происходит со следующим кодом:

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)

Результат:

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

Как и ожидалось.

Но давайте проверим вывод приведенного ниже кода:

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)

Изменено значение таймера setTimeout обещания, которое необходимо разрешить, с 10 мс на 1 мс.

Результат:

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

Любое объяснение этому?

Для объяснения я воспользуюсь следующим примером:

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

Следовательно, это напечатает

1 ms timeout
0 ms timeout

Понимание вышесказанного: Вызов setTimeout является синхронным (даже если его обратный вызов помещается в асинхронную очередь), т.е. мы вызываем setTimeout () и переходим к следующему оператору - это синхронное действие само может занять 1 мс.

Другими словами, 1 мс - это слишком мало времени, поэтому к тому времени, когда движок JS увидит второй асинхронный оператор, первый уже потратит 1 мс в очереди.

Я также предлагаю вам попробовать следующее

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

Это будет печататься Firstраньше, Secondдаже если у первого был тайм-аут 2 мс, а у второго - 0 мс. Теперь измените значение forLoopLimitна 1 или даже на 10, вы увидите, что синхронная задача теперь не занимает 3 миллисекунды и Secondпечатается раньше.First

Также стоит попробовать:

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

Попробуйте несколько раз выше, и вы увидите, что иногда журналы консоли имеют разные временные метки. Примерно можно сказать console.log()и Date.now()взять 0,5 мс. Это не что иное, как время для вызова / выполнения синхронного материала.

Из модели параллелизма и цикла событий

• setTimeout не запускается сразу после истечения его таймера
• Нулевая задержка на самом деле не означает, что обратный вызов сработает через ноль миллисекунд. Вызов setTimeoutс задержкой в ​​0 (ноль) миллисекунд не выполняет функцию обратного вызова после заданного интервала. По сути, setTimeoutнеобходимо дождаться завершения всего кода для сообщений в очереди, даже если вы указали конкретный лимит времени для своего setTimeout.

Что произойдет, если мы установим 2 и 1 миллисекунды:

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

Результат всегда будет:

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 ❌

Заключение

Если вы хотите правильного поведения, стоит избавиться от нулевых задержек.

В Chrome жестко задано минимальное время ожидания 1 мс .

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

Итак, для Chrome все ваши setTimeout( fn , 0 )преобразуются в setTimeout( fn , 1 )и, таким образом, запускаются после первого запланированного (помните, что конструкторы Promise вызываются синхронно).

Таким образом, мы могли бы упростить ваш пример с помощью

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

и в Chrome , то 1msзадержка будет всегда стрелять первым, вопреки здравому смыслу , потому что внутренне он будет на самом деле:

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

Если бы у вас было установлено на 1и 2вместо 0и 1, ваше ожидание было бы выполнено.

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)