Javascript, Promises và setTimeout

Tôi đã chơi với Promises, nhưng tôi không hiểu điều gì đang xảy ra với đoạn mã sau:

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)

Đầu ra là:

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

Nó đúng như mong đợi.

Nhưng hãy kiểm tra đầu ra của mã dưới đây:

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)

Đã thay đổi giá trị bộ hẹn giờ thời gian chờ được giải quyết từ 10ms thành 1ms

Đầu ra là:

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

Bất kỳ lời giải thích cho điều này?

Tôi sẽ sử dụng ví dụ sau để giải thích:

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

Do đó, điều này sẽ in

1 ms timeout
0 ms timeout

Hiểu biết ở trên: Việc gọi setTimeouts là đồng bộ (mặc dù lệnh gọi lại của nó được đặt trong hàng đợi không đồng bộ), tức là chúng tôi gọi setTimeout () và chuyển sang câu lệnh tiếp theo - bản thân hành động đồng bộ này có thể mất 1ms.

Nói cách khác, 1ms là thời gian quá thấp nên vào thời điểm công cụ JS nhìn thấy câu lệnh không đồng bộ thứ 2, câu lệnh đầu tiên đã dành 1ms trong hàng đợi.

Tôi cũng khuyên bạn nên thử những điều sau

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

Điều này sẽ in Firsttrước đó Secondmặc dù cái trước có thời gian chờ 2ms so với cái sau có 0ms. Bây giờ thay đổi forLoopLimitthành 1 hoặc thậm chí 10, bạn sẽ thấy rằng tác vụ đồng bộ không mất 3 mili giây bây giờ và Secondđược in trước đóFirst

Cũng đáng thử là:

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

Hãy thử ở trên nhiều lần và bạn sẽ thấy rằng đôi khi nhật ký bảng điều khiển sẽ có các dấu thời gian khác nhau. Đại khái, bạn có thể nói console.log()và Date.now()mất 0,5ms. Không có gì khác ngoài thời gian để gọi / thực thi nội dung đồng bộ.

Từ mô hình đồng tiền và vòng lặp sự kiện

• setTimeout không chạy ngay sau khi bộ đếm thời gian của nó hết hạn
• Độ trễ bằng 0 không thực sự có nghĩa là cuộc gọi lại sẽ tắt sau 0 mili giây. Việc gọi setTimeoutvới độ trễ 0 (không) mili giây không thực hiện hàm gọi lại sau khoảng thời gian nhất định. Về cơ bản, setTimeoutcần phải đợi tất cả mã cho các thư được xếp hàng đợi hoàn thành mặc dù bạn đã chỉ định giới hạn thời gian cụ thể cho setTimeout của mình.

Điều gì xảy ra nếu chúng ta đặt 2 và 1 mili giây:

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

Đầu ra sẽ luôn là:

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 ❌

Phần kết luận

Nếu bạn muốn có một hành vi đúng đắn, đáng để thoát khỏi sự chậm trễ của Zero.

Chrome có thời gian chờ tối thiểu được mã hóa cứng là 1ms .

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

Vì vậy, đối với Chrome, tất cả của bạn setTimeout( fn , 0 )được chuyển đổi thành setTimeout( fn , 1 )và do đó được lập lịch để kích hoạt sau lần đầu tiên bạn lập lịch (hãy nhớ rằng các hàm tạo Promise được gọi là đồng bộ).

Vì vậy, chúng tôi thực sự có thể đơn giản hóa ví dụ của bạn với

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

và trong Chrome , độ 1mstrễ sẽ luôn kích hoạt trước tiên, trái với suy nghĩ thông thường bởi vì bên trong nó thực sự là:

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

Nếu bạn đã đặt nó thành 1và 2thay vì 0và 1, kỳ vọng của bạn sẽ được thực hiện.

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)