基于前置输入blur事件控制后续输入框焦点禁用的问题

这个问题的核心在于你原来的代码依赖同步的验证结果，但当doSomeErrorChecking()是异步操作时（比如调用后端接口、执行耗时的异步逻辑），ok变量的更新会滞后于用户的操作——比如用户在I1失焦后立刻点击I2，这时候异步验证还没完成，ok还是旧值，导致逻辑失效。

下面是几种可行的解决方案，兼顾功能和用户体验：

方案1：用Promise+状态变量跟踪验证阶段 #

首先，我们需要把异步的doSomeErrorChecking()包装成返回Promise的函数（如果它现在不是的话，你可以自己封装一层），然后维护一个状态变量来跟踪验证的状态（idle/未验证、pending/验证中、valid/验证通过、invalid/验证失败）。

代码示例：

// 模拟异步验证函数（实际场景可能是axios/fetch请求后端）
function doSomeErrorChecking() {
  return new Promise((resolve) => {
    setTimeout(() => {
      const inputValue = $('#I1').val().trim();
      resolve(inputValue.length >= 3); // 示例：长度≥3则验证通过
    }, 1200);
  });
}

// 维护验证状态
let validationStatus = 'idle';

$('#I1').on('blur', async function() {
  validationStatus = 'pending';
  try {
    const isValid = await doSomeErrorChecking();
    validationStatus = isValid ? 'valid' : 'invalid';
    
    // 优化：如果用户在验证过程中尝试过聚焦I2，验证通过后自动让I2获得焦点
    if (isValid && $('#I2').data('focusRequested')) {
      $('#I2').focus();
      $('#I2').data('focusRequested', false);
    }
  } catch (error) {
    // 处理验证失败（比如请求报错）
    validationStatus = 'invalid';
    console.error('验证出错:', error);
  }
});

$('#I2').on('focus', function(e) {
  switch (validationStatus) {
    case 'invalid':
      e.target.blur();
      alert('请先正确填写I1');
      break;
    case 'pending':
      e.target.blur();
      $('#I2').data('focusRequested', true); // 标记用户有聚焦需求
      alert('正在验证I1，请稍候');
      break;
    case 'idle':
      e.target.blur();
      alert('请先填写I1并点击其他区域完成验证');
      break;
    // valid状态下，允许正常聚焦，无需处理
  }
});

方案2：禁用I2直到验证完成（更直观的用户体验） #

这种方案更直接：在I1开始验证时禁用I2，验证完成后根据结果决定是否启用I2。因为禁用的输入框本身无法获得焦点，不需要额外处理focus事件，逻辑更简洁。

代码示例：

function doSomeErrorChecking() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve($('#I1').val().trim() !== '');
    }, 1000);
  });
}

$('#I1').on('blur', async function() {
  // 开始验证时禁用I2
  $('#I2').prop('disabled', true);
  try {
    const isValid = await doSomeErrorChecking();
    // 验证通过则启用I2，否则保持禁用
    $('#I2').prop('disabled', !isValid);
    
    // 同样处理用户之前的聚焦请求
    if (isValid && $('#I2').data('focusRequested')) {
      $('#I2').focus();
      $('#I2').data('focusRequested', false);
    }
  } catch (error) {
    $('#I2').prop('disabled', true);
    console.error('验证出错:', error);
  }
});

// 可选：处理用户在I2禁用时点击的情况，给出提示
$('#I2').on('click', function() {
  if ($(this).is(':disabled')) {
    alert('请先完成I1的验证');
  }
});

关键注意点 #

1. 异步操作的错误处理：一定要用try/catch包裹await的异步逻辑，避免验证过程中出现错误导致状态卡住。
2. 用户操作的预判：要考虑用户在验证过程中尝试聚焦I2的场景，通过data存储用户的操作意图，验证完成后再响应。
3. 用户体验优化：添加合适的提示（比如alert或者页面内的文本提示），让用户清楚知道为什么不能聚焦I2。

内容的提问来源于stack exchange，提问作者KOGUMELO