javascript 队列_JavaScript队列简介

javascript 队列

介绍 (Introduction)

queueMicrotask is a new browser API which can be used to convert your synchronous code into async:

queueMicrotask是新的浏览器API，可用于将您的同步代码转换为异步代码：

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

It's similar to what we were doing using setTimeout:

这类似于我们使用setTimeout进行的操作：

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

So what's the use of queueMicrotask when we already have setTimeout ?

那么，当我们已经有了setTimeout时， queueMicrotask的用途是什么？

queueMicrotask adds the function (task) into a queue and each function is executed one by one (FIFO) after the current task has completed its work and when there is no other code waiting to be run before control of the execution context is returned to the browser's event loop.

queueMicrotask将函数(任务)添加到队列中，并且在当前任务完成其工作之后，并且在没有其他代码等待运行之前，将每个函数逐个执行(FIFO)，然后将执行上下文的控制权返回给队列。浏览器的事件循环。

Basically the tasks of queueMicrotask are executed just after current callstack is empty before passing the execution to the event loop.

基本上， queueMicrotask的任务在当前调用堆栈为空之后立即执行，然后再将执行传递给事件循环。

In the case of setTimeout, each task is executed from the event queue, after control is given to the event loop.

对于setTimeout ，在将控制权交给事件循环之后，将从事件队列执行每个任务。

So if we execute setTimeout first and then queueMicrotask, which will be called first?  Execute the below code and check out yourself:

那么，如果我们先执行setTimeout ，然后再执行queueMicrotask ，它将首先被调用？ 执行以下代码并自行检查：

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

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

Node.js does the same thing with "process.nextTick".

Node.js对“ process.nextTick”执行相同的操作。

何时使用 (When to Use It)

There is no rule for when to use queueMicrotask, but it can be used cleverly to run a piece of code without stopping the current execution.

对于何时使用queueMicrotask没有规则，但是可以巧妙地使用它来运行一段代码，而无需停止当前执行。

For example, let's say we have an array where we are maintaining list of values. After every value is inserted, we sort the array so that searching for values is faster.

例如，假设我们有一个数组用于维护值列表。 插入每个值之后，我们对数组进行排序，以便更快地搜索值。

var arr=[];

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

However, searching for an element is done whenever someone uses a search input box. This means the event handler will be called after control is transferred to the event loop, so sorting the data blocks the execution of other important synchronous code.

但是，只要有人使用搜索输入框，就可以搜索元素。 这意味着将控制权转移到事件循环后将调用事件处理程序，因此对数据进行排序会阻止其他重要的同步代码的执行。

Here's how we can use queueMicrotask to improve our code:

这是我们如何使用queueMicrotask来改进代码的方法：

var arr = [];

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

参考文献 (References)

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

  https://developer.mozilla.org/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/queueMicrotask

翻译自: https://www.freecodecamp.org/news/queuemicrotask/

javascript 队列