V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
skyfollow
V2EX  ›  程序员

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

  •  
  •   skyfollow · 2020-09-11 21:15:05 +08:00 · 2781 次点击
    这是一个创建于 869 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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

    谢谢!

    24 条回复    2020-09-12 21:46:54 +08:00
    skiworld
        1
    skiworld  
       2020-09-11 21:16:49 +08:00
    你怎么判断他是最后一次点击的。
    BryceGu
        2
    BryceGu  
       2020-09-11 21:18:41 +08:00 via iPhone
    js 防抖了解一下
    Blackhumor
        3
    Blackhumor  
       2020-09-11 21:25:49 +08:00
    节流( throttle )和防抖动( debounce ) 了解一下
    px920906
        4
    px920906  
       2020-09-11 21:50:57 +08:00
    巧了,之前项目遇到过同样的需求,楼主可以参考一下 -> https://onepixel.site/blog/2019/04/axios_cancel_repeated_requests/
    在我看来防抖只是第一层,只要发出请求的间隔大于防抖的延迟就会发出多个请求,而网络不稳定时就可能会出现“先发出的请求”在“后发出的请求”之后完成的情况
    VDimos
        5
    VDimos  
       2020-09-11 21:55:09 +08:00 via Android
    防抖
    cyitao
        6
    cyitao  
       2020-09-11 21:56:19 +08:00 via Android   ❤️ 3
    这个场景适合防抖,防抖的原理是点击一个客户后不会立即请求,而是有一个 500 毫秒(可自定义)的延迟。在 500ms 内点击第 2 3 4 5 6 个客户时,会取消上一次点击的计时器,并设置新的请求计时器。直到 500ms 内无点击操作,才真正发出请求。
    liberty1900
        7
    liberty1900  
       2020-09-11 22:05:13 +08:00 via Android
    楼上没有回答核心问题,楼主说的是不同内容
    Event Delegation 可解
    azh7138m
        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
    wxsm
        9
    wxsm  
       2020-09-11 22:15:08 +08:00 via iPhone   ❤️ 3
    首先,停止加载是不现实的,因为请求一旦发出就不可撤回,你只能选择在前端忽略响应,但应该这不是你想要的。
    因此,最佳方案就是 debounce,楼上什么 event delegate,我倒是希望你自圆其说。让我学习一下。
    tanranran
        10
    tanranran  
       2020-09-11 22:29:48 +08:00
    rxjs
    poisedflw
        11
    poisedflw  
       2020-09-11 22:54:15 +08:00
    一个定时器就搞定了吧,点击左侧延迟 400ms 去请求数据,点击下一个人的时候清掉上一次的定时器,依次类推。
    finalwave
        12
    finalwave  
       2020-09-11 22:58:41 +08:00
    axios 提供 cancel 的。自己写一个代理请求在回调的时候判断是否执行真回调的函数也行。
    finalwave
        13
    finalwave  
       2020-09-11 23:02:53 +08:00
    啊,楼主要的是停止请求,那只能 debounce 和 abort 了
    amundsen
        14
    amundsen  
       2020-09-11 23:06:28 +08:00
    使用著名的 js 库 lodash 中的防抖函数:debounce 或者节流函数:throttle 。
    realpg
        15
    realpg  
       2020-09-12 01:27:18 +08:00   ❤️ 1
    点击直接先反馈一个载入中 modal 等待返回异步处理后取消
    不给客户瞎 J8 点的机会
    rodrick
        16
    rodrick  
       2020-09-12 11:13:11 +08:00
    debounce 可解 但是实际上用户点击好几个客户是不是就是想要加载多个聊天窗口之类的 还是单纯的误操作
    mczhanhong
        17
    mczhanhong  
       2020-09-12 11:21:58 +08:00
    可以考虑 rxjs 的 switchmap
    ccraohng
        18
    ccraohng  
       2020-09-12 12:50:52 +08:00 via iPhone
    优先队列,后面的优先级别最高。
    skyfollow
        19
    skyfollow  
    OP
       2020-09-12 14:07:34 +08:00
    @skiworld 你好,不能判断。所以策略是,希望下一次点击发生时,之前的请求全部能够停止继续请求。
    KuroNekoFan
        20
    KuroNekoFan  
       2020-09-12 14:37:22 +08:00
    每次点击保存一个 click-id,然后处理请求结果的时候对比事件处理闭包的 click-id 和 ui 组件保存的 click-id,不一样则抛弃
    oukichi
        21
    oukichi  
       2020-09-12 15:49:47 +08:00
    rxjs 完美解决
    zhyt0520
        22
    zhyt0520  
       2020-09-12 18:20:47 +08:00
    是不是可以考虑从根源限制一下连续快速点击这个操作
    点了一个之后,必须过一会才能点下一个
    OHyn
        23
    OHyn  
       2020-09-12 19:53:57 +08:00
    防抖了解一下,延迟执行 xxxx 毫秒,这段时间内如过油相同操作,继续延迟。
    jones2000
        24
    jones2000  
       2020-09-12 21:46:54 +08:00
    延迟处理
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   实用小工具   ·   2812 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 49ms · UTC 09:14 · PVG 17:14 · LAX 01:14 · JFK 04:14
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.