mirror of
https://github.com/KieSun/all-of-frontend.git
synced 2024-12-12 09:54:36 +08:00
feat: update answer
This commit is contained in:
parent
8166b49f28
commit
c89310f1d2
46
Answer/1 ~ 10/4.md
Normal file
46
Answer/1 ~ 10/4.md
Normal file
@ -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');
|
||||
```
|
Loading…
Reference in New Issue
Block a user