如何在前端客户多次点击不同的内容时，只加载最后一次点击的请求？

[skyfollow]

首先，题主不是前端，但是现在遇到了一个前端问题，希望能在 V2EX 得到一些方向上的指导。

问题背景：我们是一个类似于 IM 的工具，在后台每个操作人员，可以看到很多客户，可以与其进行聊天。

点击一个客户，此时，右侧会去加载聊天内容以及该客户的其他信息，大约有产生四个接口请求。

现在遇到的问题时：如果操作人员，连续快速的点击多个客户，比如连续点击十个客户，此时就会前端积累大量未完成的请求，显得后面的加载非常卡。

现在希望，如果发生了连续多次点击，当点击到后面一个客户时，之前未加载完毕的请求全部停止加载，只加载当前的客户所需要的请求，这样资源，便可以集中在最有意义的最后一次点击上。

谢谢！

[skiworld]

你怎么判断他是最后一次点击的。

[BryceGu]

js 防抖了解一下

[Blackhumor]

节流（ throttle ）和防抖动（ debounce ） 了解一下

[px920906]

巧了，之前项目遇到过同样的需求，楼主可以参考一下 -> https://onepixel.site/blog/2019/04/axios_cancel_repeated_requests/
在我看来防抖只是第一层，只要发出请求的间隔大于防抖的延迟就会发出多个请求，而网络不稳定时就可能会出现“先发出的请求”在“后发出的请求”之后完成的情况

[VDimos]

防抖

[cyitao]

这个场景适合防抖，防抖的原理是点击一个客户后不会立即请求，而是有一个 500 毫秒(可自定义)的延迟。在 500ms 内点击第 2 3 4 5 6 个客户时，会取消上一次点击的计时器，并设置新的请求计时器。直到 500ms 内无点击操作，才真正发出请求。

[liberty1900]

楼上没有回答核心问题，楼主说的是不同内容
Event Delegation 可解

[azh7138m]

意义并不大
支持 abort 操作需要较高的浏览器版本
https://developer.mozilla.org/en-US/docs/Web/API/AbortController
底层也不一定能真的 abort

还不如低成本搞个 debounce

[wxsm]

首先，停止加载是不现实的，因为请求一旦发出就不可撤回，你只能选择在前端忽略响应，但应该这不是你想要的。
因此，最佳方案就是 debounce，楼上什么 event delegate，我倒是希望你自圆其说。让我学习一下。

[tanranran]

rxjs

[poisedflw]

一个定时器就搞定了吧，点击左侧延迟 400ms 去请求数据，点击下一个人的时候清掉上一次的定时器，依次类推。

[finalwave]

axios 提供 cancel 的。自己写一个代理请求在回调的时候判断是否执行真回调的函数也行。

[finalwave]

啊，楼主要的是停止请求，那只能 debounce 和 abort 了

[amundsen]

使用著名的 js 库 lodash 中的防抖函数：debounce 或者节流函数：throttle 。

[realpg]

点击直接先反馈一个载入中 modal 等待返回异步处理后取消
不给客户瞎 J8 点的机会

[rodrick]

debounce 可解 但是实际上用户点击好几个客户是不是就是想要加载多个聊天窗口之类的 还是单纯的误操作

[mczhanhong]

可以考虑 rxjs 的 switchmap

[ccraohng]

优先队列，后面的优先级别最高。

[skyfollow]

@skiworld 你好，不能判断。所以策略是，希望下一次点击发生时，之前的请求全部能够停止继续请求。

[KuroNekoFan]

每次点击保存一个 click-id,然后处理请求结果的时候对比事件处理闭包的 click-id 和 ui 组件保存的 click-id，不一样则抛弃