JavaScript中if条件满足else仍执行？删除带关联依赖地点的异常解决

• 循环逻辑存在严重缺陷：当前代码在遍历部门数组时，对每一个部门都会做分支判断：如果当前部门和待删地点有关联就弹依赖提示，没有关联就直接调用删除函数。这就导致只要存在一个和待删地点无关的部门，就会触发删除确认框；就算找到了关联依赖弹出提示，也没有终止循环，后续遍历到无关部门时依然会触发删除逻辑。
• 缺少全局依赖校验：没有先完整遍历所有部门确认是否存在依赖，而是在遍历过程中直接执行分支逻辑，无法实现「只要有一个依赖就终止删除」的需求。
• 事件对象使用不规范：deleteLocation函数中直接使用event而没有将事件对象作为参数传入，部分浏览器下event.preventDefault()会失效。

调整逻辑为：先遍历所有部门判断待删地点是否存在关联依赖，存在则弹出提示直接终止流程，不存在再调用删除函数。

修复后的代码 #

点击事件代码 #

$('tbody').on('click', '.deleteLocationBtn', function(e){
  // 先阻止默认行为，避免冒泡异常
  e.preventDefault();
  const selectedID = e.target.dataset.id;
  let convertIDtoName;
  // 标记是否存在依赖
  let hasDependency = false;

  for (let i = 0; i < arrOfLocation.length; i++) {
    if (selectedID == arrOfLocation[i].id) {
      convertIDtoName = arrOfLocation[i].name;
      // 遍历所有部门判断是否存在依赖
      for (let j = 0; j < arrOfDepartment.length; j++) {
        if (convertIDtoName == arrOfDepartment[j].location) {
          hasDependency = true;
          // 找到依赖就跳出循环，无需继续遍历
          break;
        }
      }
      // 匹配到对应地点后跳出外层循环，优化性能
      break;
    }
  }

  // 统一做逻辑判断
  if (hasDependency) {
    alert("There's dependencie(s) to this location!");
    // 存在依赖直接终止，不执行后续删除逻辑
    return;
  }
  // 没有依赖才调用删除函数
  deleteLocation(selectedID);
})

deleteLocation函数代码 #

const deleteLocation = (id) => {
  if (confirm('Are you sure to delete this record ?')) {
    $.ajax({
      type: "GET",
      url: `companydirectory/libs/php/deleteLocationByID.php?id=${id}`,
      success: function(data) {
        getAllLocation()
        $("#location_data_list").load(location.href + " #location_data_list");
      },
      error: function(request,error) {
        console.log(request)
      }
    })
  }
}

核心修改点 #

• 新增hasDependency变量标记待删地点是否存在关联依赖，遍历部门时只要找到关联就标记为true并跳出循环，避免无效遍历。
• 遍历全部完成后再统一做逻辑判断：存在依赖就弹提示直接return终止流程，不存在依赖才调用删除函数。
• 移除deleteLocation中不规范的event调用，将阻止默认行为的逻辑统一放到点击事件开头执行。
• 新增循环break逻辑，匹配到对应地点、找到依赖后都直接跳出循环，优化执行效率。

内容的提问来源于stack exchange，提问作者kasi-code