HTML点击让鼠标变成等待状态, 如何利用Response使其恢复正常

在 HTML 中，可以通过在需要设置为等待状态的元素上添加 `cursor: wait;` 样式来实现。例如：

<button id="myButton" style="cursor: wait;">点击我</button>

当用户点击这个按钮时，鼠标会变成等待状态。接下来，我们可以使用 JavaScript 中的 `fetch` 或 `XMLHttpRequest` 等工具发送请求，并在请求完成后恢复鼠标状态。

示例代码：

<button id="myButton" style="cursor: wait;">点击我</button>

<script>
  const button = document.getElementById('myButton');
  button.addEventListener('click', () => {
    // 设置为等待状态
    document.body.style.cursor = 'wait';

    // 发送请求
    fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then(response => response.json())
      .then(data => {
        console.log(data);
        
        // 恢复正常状态
        document.body.style.cursor = 'default';
      })
      .catch(error => {
        console.error(error);
        
        // 恢复正常状态
        document.body.style.cursor = 'default';
      });
  });
</script>

在这个示例中，我们监听了按钮的点击事件，然后在点击时将整个页面的鼠标状态设置为等待状态。接着，我们使用 `fetch` 发送了一个请求，并在请求完成后恢复了页面的鼠标状态，无论请求成功或失败都会执行恢复操作。