如何让函数仅在两个输入字段均变化时执行并避免重复触发？

问题分析 #

原代码存在两个核心问题：

• 每次输入字段触发change事件时，都会给保存按钮新增一个click事件监听器，导致点击保存时重复执行onNoteEdit
• 未实现「两个输入字段均发生变化才执行目标函数」的逻辑，且在change事件中提前获取输入值，会导致点击保存时使用的是第一次修改后的值，而非最新输入值

实现方案 #

通过跟踪字段修改状态 + 仅绑定一次保存按钮点击事件来解决问题：

1. 记录字段初始值，或用状态标记跟踪每个字段是否被修改
2. 仅在初始化阶段给保存按钮绑定一次点击事件，避免重复绑定
3. 点击保存时，检查两个字段是否都已修改，同时获取最新输入值后再执行onNoteEdit

代码示例 #

// 初始化时记录字段初始值
const initialTitle = inputTitle.value.trim();
const initialBody = inputBody.value.trim();

// 标记字段是否修改过
let isTitleChanged = false;
let isBodyChanged = false;

// 给输入字段绑定change事件，仅更新修改标记
[inputBody, inputTitle].forEach((inputField) => {
  inputField.addEventListener("change", () => {
    if (inputField === inputTitle) {
      isTitleChanged = inputTitle.value.trim() !== initialTitle;
    } else {
      isBodyChanged = inputBody.value.trim() !== initialBody;
    }
  });
});

// 仅绑定一次保存按钮的点击事件
const saveEditedNote = this.root.querySelector(".save-btn");
saveEditedNote.addEventListener("click", () => {
  // 检查两个字段是否都已修改
  if (isTitleChanged && isBodyChanged) {
    const editedNote = {
      id: noteItem.dataset.noteId,
      title: inputTitle.value.trim(),
      body: inputBody.value.trim(),
    };
    this.onNoteEdit(editedNote);
    
    // 可选：执行后重置修改标记，避免重复提交
    isTitleChanged = false;
    isBodyChanged = false;
  }
});

简化方案（直接在点击时对比初始值） #

如果不需要实时跟踪修改状态，可直接在点击保存时对比当前值与初始值：

const initialTitle = inputTitle.value.trim();
const initialBody = inputBody.value.trim();

const saveEditedNote = this.root.querySelector(".save-btn");
saveEditedNote.addEventListener("click", () => {
  const newTitle = inputTitle.value.trim();
  const newBody = inputBody.value.trim();
  
  // 判断两个字段都和初始值不同
  if (newTitle !== initialTitle && newBody !== initialBody) {
    const editedNote = {
      id: noteItem.dataset.noteId,
      title: newTitle,
      body: newBody,
    };
    this.onNoteEdit(editedNote);
  }
});

// 可选：实时更新保存按钮状态（比如未满足条件时禁用）
[inputBody, inputTitle].forEach((inputField) => {
  inputField.addEventListener("change", () => {
    const newTitle = inputTitle.value.trim();
    const newBody = inputBody.value.trim();
    saveEditedNote.disabled = !(newTitle !== initialTitle && newBody !== initialBody);
  });
});

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