JavaScript enables asynchronous flow control through queues

I see a face question above.

某个应用模块由文本框 input，以及按钮 A，按钮 B 组成。点击按钮 A，会向地址 urlA 发出一个 ajax 请求，并将返回的字符串填充到 input 中（覆盖 input 中原有的数据），点击按钮 B，会向地址 urlB 发出一个 ajax 请求，并将返回的字符串填充到 input 中（覆盖 input 中原有的数据）。当用户依次点击按钮 A、B 的时候，预期的效果是 input 依次被 urlA、urlB 返回的数据填充，但是由于到 urlA 的请求返回比较慢，导致 urlB 返回的数据被 urlA 返回的数据覆盖了，与用户预期的顺序不一致。请问如何设计代码，解决这个问题？

Want to shift
Links: https://zhuanlan.zhihu.com/p/25259283
Source: Know

Copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please specify the source.
Search the Internet, find the answer I think is not particularly good. If this expands, turn to click the button ABCDEFG, or Baab back and forth point, it is not good to do.
The following people say that using rxjs less than 10 lines of code, I have not tried. But this is, after all, the framework, the library. Can be a native solution, or can learn a lot of things.
I think this scenario is obviously suitable for use in queues. At the time I was thinking, I first use the queue to implement a synchronous block to send Ajax programs. I feel that I should optimize the upgrade again, asynchronous non-blocking send Ajax, to achieve this requirement. I wrote down the process of thinking.
We use settimeout to simulate Ajax, record the order of clicks through the queue, and then execute Ajax sequentially through promise. The previous Ajax executes after playing and then executes the latter one Ajax.

<! DOCTYPE html>

Click ABBA


Okay. Solved. But let me try to upgrade the problem again. The interviewer says you're Ajax, which is a synchronous block. I do not block, click on the button to send Ajax, do not waste time to wait for Ajaxa to complete the re-hair ajaxb. The order in which they are displayed is followed by the first B in the order of the clicks.
We change the program, we click the button immediately after executing Ajax (), here is a function to return the promise, the promise into the queue. During the execution of the queue, the value of input is changed immediately after the status of the promise is resolve.
Because the AJAXB are all ready, the value of input changes very quickly and the naked eye cannot keep up. We print it out on the console. You can see clearly the order in which Ajax and input change.

<! DOCTYPE html>

Click ABBA


JavaScript enables asynchronous flow control through queues