JS事件多回调问题：如何通过回调获取表单数据并实现条件逻辑

场景说明 #

现有一个表单，包含年份（数字输入）和剧集名称（文本输入）两个字段，需要通过回调函数获取这两个字段的值，并实现仅当年份输入不为空时，才执行剧集回调的后续逻辑，后续将基于这些数据调用MovieDB API。

原有HTML代码 #

<form action="file.js" method="post" class="FormData">
    <div>
        <p>Year</p>
    </div>
    <div>
        <input type="number" name="Year"></input>
    </div>

    <div>
        <p>Name</p>
    </div>
    <div>
        <input type="text" name="Tvshow"></input>
    </div>
    <div>
       <button class="btn">Send</button>
    </div>
</form>

原有JavaScript代码（存在逻辑问题） #

const callbackYear = Year_User => 
{
    Year_User(Year);
}

const callbackTvshow = show => 
{
  show(name)
}

const getData = () => {
    const button = document.querySelector(".btn");
    button.addEventListener("click", () => {
        const Form = document.querySelector(".FormData");
        const Year = new FormData(Form).get("Year");
        const name = new FormData(Form).get("Tvshow");
        callbackYear(Year);
        callbackTvshow(name);
    });
}

callbackYear((Year_User) => 
{
  console.log(Year_User);
})

callbackTvshow((show) => 
{
  console.log(show);
})

修正后的完整JavaScript代码 #

// 定义年份回调：接收年份数据和处理函数
const callbackYear = (yearData, handleYear) => {
  handleYear(yearData);
};

// 定义剧集回调：接收剧集名称和处理函数
const callbackTvshow = (showData, handleShow) => {
  handleShow(showData);
};

const getData = () => {
  const button = document.querySelector(".btn");
  button.addEventListener("click", (e) => {
    // 阻止表单默认提交行为，避免页面刷新
    e.preventDefault();
    
    const form = document.querySelector(".FormData");
    const year = new FormData(form).get("Year").trim();
    const showName = new FormData(form).get("Tvshow").trim();

    // 先处理年份回调
    callbackYear(year, (yearUser) => {
      console.log("获取到的年份：", yearUser);
      // 仅当年份不为空时，执行剧集回调的后续逻辑
      if (yearUser) {
        callbackTvshow(showName, (show) => {
          console.log("获取到的剧集名称：", show);
          // 这里可以添加调用MovieDB API的逻辑
        });
      } else {
        console.log("年份不能为空，请输入年份");
      }
    });
  });
};

// 初始化绑定事件
getData();

关键改动说明 #

• 修正原回调函数逻辑：原代码里callbackYear和callbackTvshow直接引用未定义变量，现在改为接收数据和处理函数作为参数，逻辑更清晰
• 阻止表单默认提交：点击按钮不会刷新页面，保证JS逻辑正常执行
• 实现条件判断：在年份回调的处理函数中判断年份是否为空，仅非空时触发剧集回调及后续逻辑
• 输入值做trim()处理：避免用户输入的空格被误判为有效内容

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