表单控件在异步验证程序中始终挂起

// 假设我们有一个输入框和一个用于显示验证结果的元素
const inputElement = document.getElementById('username');
const resultElement = document.getElementById('validationResult');

inputElement.addEventListener('input', async (event) => {
  const value = event.target.value;
  try {
    const isValid = await validateUsername(value);
    resultElement.textContent = isValid ? '用户名有效' : '用户名已存在';
  } catch (error) {
    resultElement.textContent = '验证失败，请稍后再试';
  }
});

async function validateUsername(username) {
  // 模拟异步验证过程
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // 这里应该是实际的验证逻辑，例如调用API
      const isUnique = username !== 'existingUser';
      if (isUnique) {
        resolve(true);
      } else {
        resolve(false);
      }
    }, 1000); // 模拟1秒的延迟
  });
}