OnBlur事件多次触发问题求助（ALT+TAB操作场景）

我之前也碰到过这个问题！当按下ALT+TAB切换窗口时，浏览器的焦点变化处理机制会导致blur事件被多次触发，确实挺影响校验逻辑的执行效率。下面给你两个亲测有效的解决方案：

防抖函数的核心逻辑是：让目标函数在最后一次事件触发后的指定延迟时间内才执行，这样即使blur事件被多次触发，最终也只会执行一次校验逻辑。

如果你用的是jQuery（和示例环境一致），可以这样实现：

// 先定义防抖工具函数
function debounce(func, delay = 200) {
  let timeoutId;
  return function() {
    const context = this;
    const args = arguments;
    // 清除之前的定时器
    clearTimeout(timeoutId);
    // 重新设置定时器，延迟执行校验逻辑
    timeoutId = setTimeout(() => func.apply(context, args), delay);
  };
}

// 绑定blur事件时用防抖函数包裹你的校验逻辑
$("input").on("blur", debounce(function() {
  // 这里替换成你的文本框校验逻辑
  alert("Input validated!");
}));

这种方法是通过一个变量标记当前是否正在执行校验，拦截重复的触发请求，直到当前校验完成或超时后才允许再次执行。

代码示例：

// 初始化状态标记
let isValidating = false;

$("input").on("blur", function() {
  // 如果正在校验，直接返回
  if (isValidating) return;
  
  // 标记为正在校验
  isValidating = true;
  
  // 执行你的校验逻辑
  alert("Validating input content...");
  
  // 如果是同步校验：延迟重置标记，避免短时间内重复触发
  setTimeout(() => {
    isValidating = false;
  }, 200);
  
  // 如果是异步校验（比如AJAX请求），记得在请求完成后重置标记
  // $.ajax({
  //   url: "/your-validation-api",
  //   data: { value: $(this).val() },
  //   success: () => {
  //     isValidating = false;
  //     // 处理校验成功逻辑
  //   },
  //   error: () => {
  //     isValidating = false;
  //     // 处理校验失败逻辑
  //   }
  // });
});

这两种方案都能有效解决blur事件重复执行的问题：如果你的校验是同步的，两种方法都适用；如果是异步校验，状态标记法需要在异步操作完成后手动重置标记，灵活性更高。

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