queueuserworkitem

前端每日干货

队列是什么？如何理解前端与队列？

队列相信大家都或多或少都听过，也用过了。

它是一个先进先出的数据结构，虽然在JavaScript中没有队列，但可以用Array实现队列的所有功能。

先来举一个例子：

const queue = [];

queue.push(1);

queue.push(2);

const item1 = queue.shift(); // 1

const item2 = queue.shift(); // 2

通过这个例子，大家应该对队列不陌生了。

接下来聊一下前端与队列。

说到前端不得不提，事件循环与任务队列的那点关系。

写JS的对Event Loop不陌生。

JS引擎从任务队列（ Callback Queue）中拿任务（比如onClick/onLoad等）进行处理。

JS是单线程的，所以每次它只能处理一个事件。

当这个任务是一个异步（如setTimeout）的时候，它会将这个异步任务丢给WebAPI来执行。

丢完之后，继续执行队列中下一个任务，当WebAPI执行异步任务完成之后，会把回调JS放到 任务队列（ Callback Queue）中。

这个整个过程就是Event Loop。

来一道关于异步的面试题：

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

console.log(2);

搞懂了JS中的事件循环，这段代码的运行结果就很容易回答出了。

2

1

好了，关于队列就先说到这里，后续还会给大家分享一些关于队列的应用。