javascript - 寻求令人满意的解释为什么回调中需要匿名函数包装器

Question

我知道这有效:

$("#btn_1").click(function() {
  alert("Btn 1 Clicked");
});

虽然这只是过早弹出警报对话框:

$("#btn_1").click(alert("Btn 1 Clicked"););

我的问题是:在第二种情况下，为什么警报不等待点击再执行？

Answer 1

因为当您调用函数时，参数会立即执行以提供要传递给函数的参数。

func(arg);

相当于:

var temp = arg;
func(temp);

所以当你写:

$("#btn_1").click(alert("Btn 1 Clicked"));

它相当于:

var temp = alert("Btn 1 Clicked");
$("#btn_1").click(temp);

很明显，在这种形式中，警报发生在调用 .click() 为事件添加监听器之前。

为了延迟操作，您必须提供一个函数作为参数。函数定义本身不会导致任何代码被执行，它只会在稍后被调用时执行(这称为“回调”)。

它不一定是匿名函数，您也可以命名它。

function myAlert() {
    alert("Btn 1 Clicked");
}
$("#btn_1").click(myAlert);

但请注意，您只是提供函数名称作为 .click() 的参数，而不是编写 myAlert()，因为这会调用立即执行，不会延迟到点击事件发生。

正如 @Titus 所说，click() 期望其参数是一个函数，因为它希望将其作为回调执行。但你可以调用另一个函数来返回一个函数:

function alerter(message) {
    return function() {
        alert(message);
    }
}
$("#btn_1").click(alerter("Btn 1 Clicked"));

请注意，alerter() 不会直接调用 alert()，它返回另一个函数，该函数在调用时会调用 alert()叫做。如上所述，直到点击事件执行其回调后才会发生这种情况。