前端按钮锁 代码示例子

前端按钮锁定通常是指在用户交互过程中防止按钮被误点击的操作，比如在一个异步操作正在进行时，锁定按钮以避免用户多次触发该操作。这是一个简单的JavaScript代码示例：

// 假设有一个按钮元素 btn 和一个变量 isLocked 存储当前是否锁定状态
const btn = document.getElementById('your-button-id');
let isLocked = false;

// 定义锁定和解锁函数
function lockButton() {
  isLocked = true;
  btn.disabled = true; // 隐藏并禁用按钮
  btn.style.backgroundColor = 'gray'; // 可选：改变样式显示锁定
}

function unlockButton() {
  isLocked = false;
  btn.disabled = !isLocked; // 如果已锁定，则解禁，反之则锁定
  btn.style.backgroundColor = ''; // 恢复原样
}

// 当你需要锁定按钮时，调用 lockButton()
btn.addEventListener('click', function(e) {
  if (isLocked) {
    e.preventDefault(); // 阻止默认事件，如提交表单
    console.log('按钮已被锁定，无法点击');
  }
});

// 在需要的地方解锁按钮
// 或者当异步操作完成时手动解锁
// unlockButton();

在这个例子中，如果`isLocked`为真，点击按钮将阻止默认动作并显示一条消息，直到调用`unlockButton()`函数来解锁。