From c89310f1d20d20704392cd3891a6efc126415e7b Mon Sep 17 00:00:00 2001
From: xuwu <zx597813039@gmail.com>
Date: Sun, 14 Mar 2021 22:01:07 +0800
Subject: [PATCH] feat: update answer

---
 Answer/1 ~ 10/4.md | 46 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 Answer/1 ~ 10/4.md

diff --git a/Answer/1 ~ 10/4.md b/Answer/1 ~ 10/4.md
new file mode 100644
index 0000000..68a0693
--- /dev/null
+++ b/Answer/1 ~ 10/4.md	
@@ -0,0 +1,46 @@
+页面上有三个按钮，分别为 A、B、C，点击各个按钮都会发送异步请求且互不影响，每次请求回来的数据都为按钮的名字。
+
+请实现当用户依次点击 A、B、C、A、C、B 的时候，最终获取的数据为 ABCACB。
+
+这道题目主要两个考点：
+
+1. 请求不能阻塞，但是输出可以阻塞。比如说 B 请求需要耗时 3 秒，其他请求耗时 1 秒，那么当用户点击 BAC 时，三个请求都应该发起，但是因为 B 请求回来的慢，所以得等着输出结果。
+2. 如何实现一个队列？
+
+其实我们无需自己去构建一个队列，直接利用 `promise.then` 方法就能实现队列的效果了。
+
+答案摘自 [pandaomeng(https://github.com/KieSun/fucking-frontend/issues/5#issuecomment-796657041)
+
+```js
+class Queue {
+  promise = Promise.resolve();
+
+  excute(promise) {
+    this.promise = this.promise.then(() => promise);
+    return this.promise;
+  }
+}
+
+const queue = new Queue();
+
+const delay = (params) => {
+  const time = Math.floor(Math.random() * 5);
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(params);
+    }, time * 500);
+  });
+};
+
+const handleClick = async (name) => {
+  const res = await queue.excute(delay(name));
+  console.log(res);
+};
+
+handleClick('A');
+handleClick('B');
+handleClick('C');
+handleClick('A');
+handleClick('C');
+handleClick('B');
+```