js 频繁点击切换两个按钮发送请求,显示最后一次发送请求的结果

在JavaScript中处理频繁点击切换两个按钮发送请求并显示最后一次发送请求的结果，可以通过以下几种方法来实现：

方法1：使用Promise和async/await

你可以使用async/await来处理异步请求，并确保在发送请求时，之前的请求被取消或者忽略。这可以通过AbortController来实现。

 

let controller = null;

async function fetchData(url) {
  if (controller) {
    controller.abort(); // 取消之前的请求
  }
  controller = new AbortController();
  const signal = controller.signal;

  try {
    const response = await fetch(url, { signal });
    const data = await response.json();
    console.log(data); // 处理数据
    return data; // 返回数据，可以在这里更新UI
  } catch (error) {
    if (error.name === 'AbortError') {
      console.log('Fetch aborted'); // 忽略取消的错误
    } else {
      console.error('Error:', error); // 处理其他错误
    }
  }
}

// 绑定到按钮点击事件
document.getElementById('button1').addEventListener('click', () => {
  fetchData('https://api.example.com/data1');
});

document.getElementById('button2').addEventListener('click', () => {
  fetchData('https://api.example.com/data2');
});

　　

方法2：使用setTimeout延迟执行请求

如果你只是想简单地避免在短时间内多次点击导致的问题，可以使用setTimeout来延迟执行下一次请求，直到当前请求完成。

let requestPending = false;

function fetchData(url) {
  if (requestPending) return; // 如果请求正在进行，则直接返回
  requestPending = true;
  setTimeout(() => { requestPending = false; }, 500); // 设置一个延迟，例如500毫秒后重置状态
  fetch(url)
    .then(response => response.json())
    .then(data => {
      console.log(data); // 处理数据
      // 更新UI等操作
    })
    .catch(error => console.error('Error:', error))
    .finally(() => { requestPending = false; }); // 确保在完成后重置状态
}

// 绑定到按钮点击事件
document.getElementById('button1').addEventListener('click', () => {
  fetchData('https://api.example.com/data1');
});

document.getElementById('button2').addEventListener('click', () => {
  fetchData('https://api.example.com/data2');
});

　　

方法3：使用fetch的缓存机制（不常用）

对于某些场景，如果你只是想获取最后一次请求的结果，可以考虑不立即处理响应，而是缓存它，然后在最后一次请求完成后处理。这种方法比较复杂，通常不推荐，除非有特定需求。例如：

let lastResponse = null;
let lastUrl = ''; // 用于记录最后一次请求的URL，以防万一需要区分处理不同的URL响应。

function fetchData(url) {
  fetch(url)
    .then(response => response.json())
    .then(data => {
      lastResponse = data; // 缓存最后一次响应的数据
      lastUrl = url; // 记录最后一次请求的URL（可选）
      if (url === lastUrl) { // 确保是最后一次请求的响应被处理（如果有多个按钮且有不同URL的情况）
        console.log(lastResponse); // 处理数据（只在最后一次请求后）
        // 更新UI等操作（只在最后一次请求后）
      }
    })
    .catch(error => console.error('Error:', error));
}

　　

注意：这种方法在某些情况下可能不够准确，特别是在快速连续点击时。更好的方式是使用AbortController或延迟执行。

总结：推荐使用AbortController结合async/await的方法，它既简洁又有效