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

skyfollow 18天前 15

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

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

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

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

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

谢谢!

最新回复 (24)
  • skiworld 14天前
    引用 2
    你怎么判断他是最后一次点击的。
  • BryceGu 14天前
    引用 3
    js 防抖了解一下
  • Blackhumor 14天前
    引用 4
    节流( throttle )和防抖动( debounce ) 了解一下
  • px920906 14天前
    引用 5
    巧了,之前项目遇到过同样的需求,楼主可以参考一下 -> https://onepixel.site/blog/2019/04/axios_cancel_repeated_requests/
    在我看来防抖只是第一层,只要发出请求的间隔大于防抖的延迟就会发出多个请求,而网络不稳定时就可能会出现“先发出的请求”在“后发出的请求”之后完成的情况
  • VDimos 14天前
    引用 6
    防抖
  • cyitao 14天前
    引用 7
    这个场景适合防抖,防抖的原理是点击一个客户后不会立即请求,而是有一个 500 毫秒(可自定义)的延迟。在 500ms 内点击第 2 3 4 5 6 个客户时,会取消上一次点击的计时器,并设置新的请求计时器。直到 500ms 内无点击操作,才真正发出请求。
  • liberty1900 14天前
    引用 8
    楼上没有回答核心问题,楼主说的是不同内容
    Event Delegation 可解
  • azh7138m 14天前
    引用 9
    意义并不大
    支持 abort 操作需要较高的浏览器版本
    https://developer.mozilla.org/en-US/docs/Web/API/AbortController
    底层也不一定能真的 abort

    还不如低成本搞个 debounce
  • wxsm 14天前
    引用 10
    首先,停止加载是不现实的,因为请求一旦发出就不可撤回,你只能选择在前端忽略响应,但应该这不是你想要的。
    因此,最佳方案就是 debounce,楼上什么 event delegate,我倒是希望你自圆其说。让我学习一下。
  • tanranran 14天前
    引用 11
    rxjs
  • poisedflw 14天前
    引用 12
    一个定时器就搞定了吧,点击左侧延迟 400ms 去请求数据,点击下一个人的时候清掉上一次的定时器,依次类推。
  • finalwave 14天前
    引用 13
    axios 提供 cancel 的。自己写一个代理请求在回调的时候判断是否执行真回调的函数也行。
  • finalwave 14天前
    引用 14
    啊,楼主要的是停止请求,那只能 debounce 和 abort 了
  • amundsen 14天前
    引用 15
    使用著名的 js 库 lodash 中的防抖函数:debounce 或者节流函数:throttle 。
  • realpg 14天前
    引用 16
    点击直接先反馈一个载入中 modal 等待返回异步处理后取消
    不给客户瞎 J8 点的机会
  • rodrick 14天前
    引用 17
    debounce 可解 但是实际上用户点击好几个客户是不是就是想要加载多个聊天窗口之类的 还是单纯的误操作
  • mczhanhong 14天前
    引用 18
    可以考虑 rxjs 的 switchmap
  • ccraohng 14天前
    引用 19
    优先队列,后面的优先级别最高。
  • 楼主 skyfollow 14天前
    引用 20
    @skiworld 你好,不能判断。所以策略是,希望下一次点击发生时,之前的请求全部能够停止继续请求。
  • KuroNekoFan 14天前
    引用 21
    每次点击保存一个 click-id,然后处理请求结果的时候对比事件处理闭包的 click-id 和 ui 组件保存的 click-id,不一样则抛弃
  • oukichi 14天前
    引用 22
    rxjs 完美解决
  • zhyt0520 14天前
    引用 23
    是不是可以考虑从根源限制一下连续快速点击这个操作
    点了一个之后,必须过一会才能点下一个
  • OHyn 14天前
    引用 24
    防抖了解一下,延迟执行 xxxx 毫秒,这段时间内如过油相同操作,继续延迟。
  • jones2000 14天前
    引用 25
    延迟处理
  • 游客
    26
返回