XML解析实现输入匹配校验时告警弹窗误触发问题求解

问题根因 #

错误告警逻辑被放在了for循环体内部，每遍历一个<product>节点就会执行一次判断：只要当前遍历的节点还没匹配到，就会触发一次alert，没有等所有节点遍历完成，自然会出现多次误触发的问题。

修复方案 #

把错误告警的判断逻辑移到for循环外面，等所有XML节点遍历完成后，再判断是否存在匹配项，没有匹配再弹出告警。同时可以将标记变量改为语义更清晰的布尔类型，匹配成功后跳出循环减少不必要的遍历。

修正后代码 #

<script>
async function loadData() {
  var data = await fetch("Product.xml");
  var parsedData = await data.text();

  var parser = new DOMParser();
  var Product_document = parser.parseFromString(parsedData,"text/xml");
  var results = "";
  var isMatch = false; // 布尔类型匹配标记，语义更明确
  var user_id_input = document.getElementById("user_id").value;
  var todos = Product_document.getElementsByTagName("product");
  
  for(var i = 0; i < todos.length; i++) {
    var Name = todos[i].getElementsByTagName("Name")[0].childNodes[0].nodeValue;
    var Code = todos[i].getElementsByTagName("Code")[0].childNodes[0].nodeValue;
    var Quantity = todos[i].getElementsByTagName("Quantity")[0].childNodes[0].nodeValue;
    var Description = todos[i].getElementsByTagName("Description")[0].childNodes[0].nodeValue;
    var Price = todos[i].getElementsByTagName("Price")[0].childNodes[0].nodeValue;
    
    if(user_id_input === Code) {
      results = "<div>"
      + "Code: " + Code 
      + ",<br/> Name: " + Name 
      + ", <br/>Quantity: " +  Quantity 
      + ",<br/> Description  " +  Description 
      + ",<br/> Price " +  Price
      + "</div><br/>";
      isMatch = true;
      break; // 匹配成功后直接跳出循环，无需遍历剩余元素
    }
  }
  
  // 所有元素遍历完成后再判断是否触发告警
  if(!isMatch) {
    alert("Error");
  }
  
  document.getElementById("results").innerHTML = results;
}
</script>

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