如何在 JavaScript 函数中正确传递并执行操作逻辑（回调函数用法详解）-js教程-PHP中文网

如何在 JavaScript 函数中正确传递并执行操作逻辑（回调函数用法详解）

本文讲解如何通过回调函数将动态行为（如页面刷新、表单清空）作为参数传入可复用的提示函数，并解决因误调用导致逻辑未执行的问题。

本文讲解如何通过回调函数将动态行为（如页面刷新、表单清空）作为参数传入可复用的提示函数，并解决因误调用导致逻辑未执行的问题。

在开发中，我们常需封装重复逻辑以提升代码复用性——例如 Bootstrap 提示框的显示与自动隐藏。但若希望在提示消失后执行特定操作（如 location.reload() 或清空输入框），直接将语句作为参数传入会导致立即执行而非延迟执行，从而破坏预期流程。

问题根源在于原代码中：

alerts("message1", location.reload()); // ❌ 立即执行 reload()，返回值（undefined）被传入
alerts("message2", (textbox.value="")); // ❌ 立即赋值并返回空字符串，非函数

此时第二个参数是执行结果，而非待执行的操作本身。setTimeout 内部的 todo; 仅是一个表达式语句，不会触发任何行为。

✅ 正确做法是：传入一个函数（即回调函数），并在 setTimeout 回调中显式调用它（todo()）：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

const alerts = (msg, todo) => {
  const alert = document.getElementById("alert"); // ✅ 确保获取到 alert 元素
  const msgEl = document.getElementById("msg");

  if (alert && msgEl) {
    alert.classList.remove("d-none");
    msgEl.innerHTML = msg;

    setTimeout(() => {
      alert.classList.add("d-none");
      if (typeof todo === "function") {
        todo(); // ✅ 延迟调用传入的函数
      }
    }, 3000);
  }
};

使用示例：

// 页面刷新
alerts("操作成功！", () => location.reload());

// 清空指定输入框（假设 textbox 已定义）
const textbox = document.getElementById("username");
alerts("已重置输入框", () => {
  textbox.value = "";
});

// 执行多个操作
alerts("提交完成", () => {
  console.log("回调执行中...");
  document.querySelector("#form").reset();
  document.getElementById("submitBtn").disabled = false;
});

⚠️ 注意事项：