【不止前端】后发先至问题的原因及解决方案

余生杂货铺2023-07-272024-07-16

在前端开发中，我们经常遇到这样的情况：用户连续多次点击按钮，造成多个并发的网络请求，然后由于网络延迟或服务器处理速度等问题，可能出现后先发后至的情况。这就可能导致页面显示的数据不正确，因为我们通常期望的是显示最后一次点击时请求的响应结果。这篇博客将会分析该问题，并提出一些解决方案。

后发先至问题的原因及解决方案

问题分析

为了理解这个问题，让我们设想一个场景：我们有一个按钮，每次点击都会向服务器发送一个请求获取数据。如果用户连续点击两次，那么就会发送两个请求。但由于网络状况或者服务器处理速度的不同，有可能第二个请求先于第一个得到响应。如果我们的代码是简单地将每个响应的数据显示在页面上，那么就可能出现后发请求的响应数据先于先发请求的响应数据显示的情况。

这就是所谓的"后先发后至"问题。即使第一个请求的响应数据后来到达，用户看到的仍然是第二个请求的数据，这显然不是我们想要的。

解决方案

解决这个问题的关键在于区分哪个响应对应于最新的用户操作。我们需要一个机制来"取消"或者"忽略"旧的请求。这里有几种可能的方法：

方法一：防抖（Debouncing）

防抖技术是一种常见的解决这种问题的方法。它的基本思想是如果在一段时间内收到多个请求，只处理最后一个。这样就可以确保只有最后一次操作会触发请求。

let timer;
button.addEventListener('click', () => {
  clearTimeout(timer);
  timer = setTimeout(() => {
    // 发送请求
  }, 300);
});

方法二：节流（Throttling）

另一种解决方案是使用节流。与防抖不同的是，节流不会忽略任何请求。相反，它会确保在一段时间内只触发一次请求。

let lastTime = 0;
button.addEventListener('click', () => {
  const now = new Date().getTime();
  if (now - lastTime > 300) {
    lastTime = now;
    // 发送请求
  }
});

方法三：请求取消（Cancellation）

还有一种方法是取消那些不再需要的请求。对于支持取消操作的HTTP库（如Axios），我们可以利用这个特性来取消先前的请求。

let cancel;
button.addEventListener('click', () => {
  if (cancel) {
    cancel();
  }
  axios.get('/api/data', {
    cancelToken: new axios.CancelToken(function executor(c) {
      cancel = c;
    })
  });
});