Html5Qrcode 扫描器在 AJAX 提交后自动重启的实现与故障排除

<button id="start_reader">启动二维码扫描器</button>

<form id="update_form">
  <div id="reader" style="width: 500px; display: none;"></div> <!-- 初始隐藏 -->
  <input type="text" id="barcode_search" placeholder="扫描结果将显示在此" />
  <button type="submit" id="barcode_submit" style="display: none;">提交条码</button>
  <div id="product_info" style="display: none;">此处显示产品信息</div> <!-- 初始隐藏 -->
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://unpkg.com/html5-qrcode" type="text/javascript"></script>

// 创建一个 Html5Qrcode 实例，确保只创建一次
const qrReader = new Html5Qrcode("reader");

// QR 扫描器配置
const qrConstraints = {
  facingMode: "environment" // 优先使用后置摄像头
};
const qrConfig = {
  fps: 10, // 每秒帧数
  qrbox: {
    width: 250,
    height: 250
  } // 扫描框大小
};

// 扫描成功回调函数
const qrOnSuccess = (decodedText, decodedResult) => {
  stopScanner(); // 成功扫描后立即停止扫描器，释放资源
  console.log(`解码信息: ${decodedText}, 结果: ${JSON.stringify(decodedResult)}`);

  $("#barcode_search").val(decodedText); // 设置条码字段的值
  // 触发表单提交，通常这里会是AJAX提交
  // 为了演示，我们直接触发form的submit事件，实际中可能直接进行AJAX调用
  $("#update_form").trigger("submit");
};

// 启动扫描器的方法
const startScanner = () => {
  $("#reader").show();
  $("#product_info").hide();
  qrReader.start(
    qrConstraints,
    qrConfig,
    qrOnSuccess,
    (errorMessage) => {
      console.error(`扫描错误: ${errorMessage}`);
    }
  ).catch((error) => {
    console.error(`启动扫描器失败: ${error}`);
  });
};

// 停止扫描器的方法
const stopScanner = () => {
  $("#reader").hide();
  $("#product_info").show();
  qrReader.stop().catch((error) => {
    console.error(`停止扫描器失败: ${error}`);
  });
};

// 监听“启动扫描器”按钮点击事件
$(document).on("click", "#start_reader", function() {
  startScanner();
});

// 监听表单提交事件（通过AJAX处理）
$("#update_form").on("submit", function(evt) {
  evt.preventDefault(); // 阻止表单默认提交行为

  // 模拟 AJAX 调用
  $.ajax({
    type: "POST",
    url: "../my-scanner-script.php", // 替换为你的后端处理脚本
    data: $(this).serialize(),
    dataType: "json",
    success: function(res) {
      console.log("AJAX 响应:", res);
      // 假设后端返回 status: 'success' 表示处理成功
      if (res.status === "success") {
        // 成功处理后，重新启动扫描器
        startScanner();
        // 清空输入框以便下一次扫描
        $("#barcode_search").val("");
      } else {
        alert("表单处理失败，请重试。");
        startScanner(); // 失败也尝试重启，让用户重新扫描
      }
    },
    error: function(jqXHR, textStatus, errorThrown) {
      console.error("AJAX 错误:", textStatus, errorThrown);
      alert("网络或服务器错误，请检查。");
      startScanner(); // 错误也尝试重启，让用户重新扫描
    }
  });
});

let waitingTimeout; // 声明一个变量来存储定时器ID

function startScanner() {
  clearTimeout(waitingTimeout); // 在每次启动时清除旧的定时器

  // ... 其他扫描器启动逻辑 ...

  // 在 qrCodeSuccessCallback 内部设置新的定时器
  const qrCodeSuccessCallback = (decodedText, decodedResult) => {
    // ... 现有逻辑 ...
    waitingTimeout = setTimeout(() => {
      isWaitingForResponse = false;
    }, 5000);
  };
}