这是一个创建于 1516 天前的主题，其中的信息可能已经有所发展或是发生改变。
首先，题主不是前端，但是现在遇到了一个前端问题，希望能在 V2EX 得到一些方向上的指导。
问题背景：我们是一个类似于 IM 的工具，在后台每个操作人员，可以看到很多客户，可以与其进行聊天。
点击一个客户，此时，右侧会去加载聊天内容以及该客户的其他信息，大约有产生四个接口请求。
现在遇到的问题时：如果操作人员，连续快速的点击多个客户，比如连续点击十个客户，此时就会前端积累大量未完成的请求，显得后面的加载非常卡。
现在希望，如果发生了连续多次点击，当点击到后面一个客户时，之前未加载完毕的请求全部停止加载，只加载当前的客户所需要的请求，这样资源，便可以集中在最有意义的最后一次点击上。
谢谢！
 |
1
skiworld 2020-09-11 21:16:49 +08:00
你怎么判断他是最后一次点击的。
|
 |
2
BryceGu 2020-09-11 21:18:41 +08:00 via iPhone
js 防抖了解一下
|
 |
3
Blackhumor 2020-09-11 21:25:49 +08:00
节流（ throttle ）和防抖动（ debounce ） 了解一下
|
 |
4
px920906 2020-09-11 21:50:57 +08:00
巧了，之前项目遇到过同样的需求，楼主可以参考一下 -> https://onepixel.site/blog/2019/04/axios_cancel_repeated_requests/
在我看来防抖只是第一层，只要发出请求的间隔大于防抖的延迟就会发出多个请求，而网络不稳定时就可能会出现“先发出的请求”在“后发出的请求”之后完成的情况 |
 |
5
VDimos 2020-09-11 21:55:09 +08:00 via Android
防抖
|
 |
6
cyitao 2020-09-11 21:56:19 +08:00 via Android  3
这个场景适合防抖，防抖的原理是点击一个客户后不会立即请求，而是有一个 500 毫秒(可自定义)的延迟。在 500ms 内点击第 2 3 4 5 6 个客户时，会取消上一次点击的计时器，并设置新的请求计时器。直到 500ms 内无点击操作，才真正发出请求。
|
 |
7
liberty1900 2020-09-11 22:05:13 +08:00 via Android
楼上没有回答核心问题，楼主说的是不同内容
Event Delegation 可解 |
 |
8
azh7138m 2020-09-11 22:10:24 +08:00 via iPhone
意义并不大
支持 abort 操作需要较高的浏览器版本 https://developer.mozilla.org/en-US/docs/Web/API/AbortController 底层也不一定能真的 abort 还不如低成本搞个 debounce |
 |
9
wxsm 2020-09-11 22:15:08 +08:00 via iPhone 3
首先，停止加载是不现实的，因为请求一旦发出就不可撤回，你只能选择在前端忽略响应，但应该这不是你想要的。
因此，最佳方案就是 debounce，楼上什么 event delegate，我倒是希望你自圆其说。让我学习一下。 |
 |
10
tanranran 2020-09-11 22:29:48 +08:00
rxjs
|
 |
11
poisedflw 2020-09-11 22:54:15 +08:00
一个定时器就搞定了吧，点击左侧延迟 400ms 去请求数据，点击下一个人的时候清掉上一次的定时器，依次类推。
|
 |
12
finalwave 2020-09-11 22:58:41 +08:00
axios 提供 cancel 的。自己写一个代理请求在回调的时候判断是否执行真回调的函数也行。
|
|
13
finalwave 2020-09-11 23:02:53 +08:00
啊，楼主要的是停止请求，那只能 debounce 和 abort 了
|
 |
14
amundsen 2020-09-11 23:06:28 +08:00
使用著名的 js 库 lodash 中的防抖函数：debounce 或者节流函数：throttle 。
|
 |
15
realpg 2020-09-12 01:27:18 +08:00 1
点击直接先反馈一个载入中 modal 等待返回异步处理后取消
不给客户瞎 J8 点的机会 |
 |
16
rodrick 2020-09-12 11:13:11 +08:00
debounce 可解 但是实际上用户点击好几个客户是不是就是想要加载多个聊天窗口之类的 还是单纯的误操作
|
 |
17
mczhanhong 2020-09-12 11:21:58 +08:00
可以考虑 rxjs 的 switchmap
|
 |
18
ccraohng 2020-09-12 12:50:52 +08:00 via iPhone
优先队列，后面的优先级别最高。
|
 |
20
KuroNekoFan 2020-09-12 14:37:22 +08:00
每次点击保存一个 click-id,然后处理请求结果的时候对比事件处理闭包的 click-id 和 ui 组件保存的 click-id，不一样则抛弃
|
 |
21
oukichi 2020-09-12 15:49:47 +08:00
rxjs 完美解决
|
 |
22
zhyt0520 2020-09-12 18:20:47 +08:00
是不是可以考虑从根源限制一下连续快速点击这个操作
点了一个之后，必须过一会才能点下一个 |
 |
23
OHyn 2020-09-12 19:53:57 +08:00
防抖了解一下，延迟执行 xxxx 毫秒，这段时间内如过油相同操作，继续延迟。
|
 |
24
jones2000 2020-09-12 21:46:54 +08:00
延迟处理
|
Select Language