HTML href绑定JS校验用户国家属性跳转URL代码问题排查

代码存在4个核心bug，直接导致逻辑不符合预期：

• 条件判断完全错误：countryCode == "TH" && countryCode == "SG"逻辑永远不成立，一个变量不可能同时等于两个不同值，这里应该用||（逻辑或）；同时判断分支顺序写反，赋值逻辑和跳转逻辑层级错配，赋值完成后根本走不到国家编码判断的分支。
• 触发时机完全错误：你把跳转逻辑写在API请求回调和$(document).ready里，页面加载完/接口返回就会直接触发跳转，根本不是等用户点击超链接时才执行；同时HTML里a标签绑定的travel()函数没有在全局定义，点击时会直接报函数未定义错误。
• 错误处理逻辑无效：fail回调里写了errorMessage.push(errorMessage)，会把空数组本身塞进报错信息，根本看不到有效错误内容。
• HTML属性写错：超链接新窗口打开的target属性值应该是_blank，你写的blank不会生效。

JS部分 #

// 全局存储国家编码，避免重复请求接口
let countryCode = "";

// 全局定义a标签绑定的travel函数
function travel() {
  // 接口未返回时的兜底提示
  if (!countryCode) {
    alert("用户信息加载中，请稍后再试");
    return false;
  }
  // 正确判断：编码为TH或SG时跳转A类地址，其余跳转B类地址
  if (countryCode === "TH" || countryCode === "SG") {
    window.open('https://....A类URL', '_blank');
  } else {
    window.open('https://....B类URL', '_blank');
  }
  // 阻止a标签默认行为
  return false;
}

/* API Completion */
api.done(function (a, c, d) {
  console.log(a.d);

  function checkCountry(upp) {
    return upp.Key === "CountryCode";
  }

  const arrUPP = a.d.UserProfileProperties.results.filter(checkCountry);
  // 接口返回后给国家编码赋值，加trim处理避免接口返回多余空格导致判断失效
  if (arrUPP.length > 0 && arrUPP[0].Value) {
    countryCode = arrUPP[0].Value.trim().toUpperCase();
  }
});

api.fail(function (a, b, c) {
  const errorMessage = [];
  // 修复之前push数组本身的bug
  errorMessage.push("用户信息加载失败");
  errorMessage.push("Error: " + a.responseJSON.error.message.value);
  alert(errorMessage.join("\n"));
});

HTML部分 #

<li class="main">
  <a class="travel" href="javascript:travel();" target="_blank">
    <i class="icon-travel"></i>
    <span>Country</span>
  </a>
</li>

• 不要把跳转逻辑写在接口回调或者DOM ready回调里，这两个都是页面加载阶段触发的时机，和用户点击动作无关，跳转逻辑必须放在点击触发的travel函数内。
• 值判断优先用===而不是==，避免隐式类型转换导致的判断异常。
• 如果担心接口返回速度慢，用户点击时还没拿到国家编码，可以默认给a标签加禁用状态，等接口返回完成后再解除禁用，交互体验更好。

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