Giới thiệu về JavaScripts queueMicrotask

Giới thiệu

queueMicrotask là một API trình duyệt mới có thể được sử dụng để chuyển đổi mã đồng bộ của bạn thành không đồng bộ:

queueMicrotask(() => {
    console.log('hey i am executed asychronously by queueMicrotask');
});

Nó tương tự như những gì chúng tôi đang làm bằng setTimeout:

setTimeout(() => {
    console.log('hey i am executed asychronously by setTimeout');
}, 0);

Vậy công dụng của queueMicrotask khi chúng tôi đã có setTimeout ?

queueMicrotask thêm chức năng (nhiệm vụ) vào một hàng đợi và mỗi chức năng được thực thi lần lượt (FIFO) sau khi tác vụ hiện tại đã hoàn thành công việc của nó và khi không còn mã nào khác đang chờ chạy trước khi quyền kiểm soát ngữ cảnh thực thi được trả về trình duyệt vòng lặp sự kiện.

Về cơ bản các tác vụ của queueMicrotask được thực thi ngay sau khi ngăn gọi hiện tại trống trước khi chuyển việc thực thi vào vòng lặp sự kiện.

Trong trường hợp setTimeout , mỗi tác vụ được thực thi từ hàng đợi sự kiện, sau khi quyền điều khiển được cấp cho vòng lặp sự kiện.

Vì vậy, nếu chúng tôi thực thi setTimeout đầu tiên và sau đó đến queueMicrotask , cái nào sẽ được gọi đầu tiên? Thực thi đoạn mã dưới đây và tự kiểm tra:

setTimeout(() => {
    console.log('hey i am executed asychronously by setTimeout');
},0);

queueMicrotask(() => {
    console.log('hey i am executed asychronously by queueMicrotask');
}); 

Node.js làm điều tương tự với "process.nextTick".

Khi nào thì sử dụng It

Không có quy tắc nào về thời điểm sử dụng queueMicrotask, nhưng nó có thể được sử dụng một cách khéo léo để chạy một đoạn mã mà không dừng quá trình thực thi hiện tại.

Ví dụ:giả sử chúng ta có một mảng mà chúng ta đang duy trì danh sách các giá trị. Sau khi mỗi giá trị được chèn, chúng tôi sắp xếp mảng để tìm kiếm giá trị nhanh hơn.

var arr=[];

function add(value){
  arr.push(value);
  arr.sort();
}

Tuy nhiên, việc tìm kiếm một phần tử được thực hiện bất cứ khi nào ai đó sử dụng hộp nhập tìm kiếm. Điều này có nghĩa là trình xử lý sự kiện sẽ được gọi sau khi điều khiển được chuyển sang vòng lặp sự kiện, vì vậy việc sắp xếp dữ liệu sẽ chặn việc thực thi mã đồng bộ quan trọng khác.

Đây là cách chúng tôi có thể sử dụng queueMicrotask để cải thiện mã của chúng tôi:

var arr = [];

function add(value) {
  arr.push(value);
  queueMicrotask(() => {
    arr.sort();
  })
}

Tài liệu tham khảo

• https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/queueMicrotask