js 按钮防止重复点击

// 示例代码：防止按钮重复点击

// 获取按钮元素
const button = document.querySelector('#myButton');

// 定义按钮点击事件处理函数
function handleClick() {
  // 禁用按钮，防止重复点击
  button.disabled = true;

  // 模拟异步操作（例如提交表单或发送请求）
  setTimeout(() => {
    // 异步操作完成后的逻辑
    console.log('操作已完成');

    // 重新启用按钮（可选）
    button.disabled = false;
  }, 2000); // 模拟2秒的延迟
}

// 绑定点击事件
button.addEventListener('click', handleClick);

/*
解释说明：
1. 使用 `querySelector` 获取页面中的按钮元素。
2. 定义 `handleClick` 函数作为按钮的点击事件处理函数。
3. 在 `handleClick` 中，首先将按钮设置为禁用状态 (`button.disabled = true`)，以防止用户再次点击。
4. 使用 `setTimeout` 模拟一个异步操作（例如提交表单或发送网络请求），并在操作完成后执行相应的逻辑。
5. 异步操作完成后，可以选择重新启用按钮 (`button.disabled = false`)。
6. 最后，使用 `addEventListener` 将点击事件绑定到按钮上。
*/