javascript - 这两个代码块之间的差异

标签 javascript jquery

为什么使用匿名函数的第一个 block 与使用命名函数的第二个 block 的工作方式不同?第一个 block 在“Hello”和“Goodbye”之间变化,但第二个 block 没有变化。

第一个 - 使用匿名函数:

function sayGoodbye() {
    $("#title").html("Goodbye");
    $("#title").click(function () {
        $("#title").html("Hello");
        $("#title").off("click");
    });
};

第二 - 使用命名函数:

function sayGoodbye() {
    console.log("goodbye");
    $("#title").html("Goodbye");
    $("#title").click(sayHello());
};

function sayHello() {
    console.log("hello");
    $("#title").html("Hello");
    $("#title").off("click");
}

HTML:

<head>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>

<body>
    <h1 id="title" onclick="sayGoodbye();"> Hello </h1>
</body>

最佳答案

$("#title").click(sayHello()); 使用:

$("#title").on("click", sayHello);

(或... $("#title").click(sayHello);)

你应该分配一个sayHello,而不是执行sayHello()

function sayGoodbye(){
  console.log("goodbye");
  $("#title").html("Goodbye");
  $("#title").click(sayHello);
};

function sayHello() {
  console.log("hello");
  $("#title").html("Hello");
  $("#title").off("click");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="title" onclick="sayGoodbye();"> Hello </h1>


这是关于切换两种状态或两个功能的另一篇精彩读物:
https://stackoverflow.com/a/21520499/383904

关于javascript - 这两个代码块之间的差异,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34169224/

相关文章:

javascript - 使用 javascript 检测 html5 验证

javascript - 将字符串转换为日期对象时获取不正确的时间

javascript - 多个加号和减号按钮

javascript - 如何将 Highcharts 图例与所有独特条目合并

javascript - 需要帮助编写正则表达式模式

javascript - 如果单击按钮,则在表单输入中输入值(在 Javascript 中)

c# - 在进入另一页之前等待 DIV 停止移动

c# - 将标签值从 C# 传递到 Bootstrap 模式

jQuery 如果边框颜色和边框宽度 =

javascript - 如果行值为负,则更改行颜色