如何访问主函数内部的事件处理函数内部的变量（不使用窗口）？

Question

使用 JQuery 库，我如何访问事件处理程序中的 username 和 listStatus 变量？我在过去的 Stackoverflow 帖子中看到您可以使用 window.[variable name]，但使用它是不好的做法。

$(function() {
  $("#search").on("click", function() {
    var username = $("#name").val();
  });
  $(".dropdown-menu a").on("click", function() {     
    $("button.dropdown-toggle").text($(this).text());
    var userSelection = $("button.dropdown-toggle").text();
  });

  var api = `https://api.jikan.moe/v3/user/${username}/animelist/${userSelection}`;
    fetch(api)
      .then(response => response.json())
      .then(data => console.log("Success!", data));
})

Answer 1

您需要将变量移动到共享的父范围，以便所有回调和函数访问相同的值。我会提出类似以下的建议：

$(function() {
  let username = null;
  let userSelection = null;
  $("#search").on("click", function() {
    username = $("#name").val();
    tryApiCall();
  });
  $(".dropdown-menu a").on("click", function() {
    $("button.dropdown-toggle").text($(this).text());
    userSelection = $("button.dropdown-toggle").text();
    tryApiCall();
  });

  function tryApiCall() {
    if (username !== null && userSelection !== null) {
      var api = `https://api.jikan.moe/v3/user/${username}/animelist/${userSelection}`;
      fetch(api)
        .then(response => response.json())
        .then(data => console.log("Success!", data));
    }
  }
});

在这种情况下，您有函数 tryApiCall 在每个事件处理程序回调中被调用，并且它仅在存在 username 和 userSelection 的值时才进行 API 调用（因为您需要这两个值来形成API 网址。