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

• 資深大佬 : 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，不一样则抛弃

• 資深大佬 : oukichi

  rxjs 完美解决

• 資深大佬 : zhyt0520

  是不是可以考虑从根源限制一下连续快速点击这个操作
  点了一个之后，必须过一会才能点下一个

• 資深大佬 : OHyn

  防抖了解一下，延迟执行 xxxx 毫秒，这段时间内如过油相同操作，继续延迟。

• 資深大佬 : jones2000

  延迟处理