javascript - JQuery/JavaScript中的回调

Question

我试图将on click事件绑定到JQuery中的表tr。下面的第一个示例按预期工作，但是第二个则没有。在不等待事件的情况下触发populate_form函数。

我想知道是否有人可以向我解释原因？

提前致谢..

例子一

.click(function() { populate_form(row.name, row.age, row.dob); });

例二

.click(populate_form(row.name, row.age, row.dob));

Answer 1

快速答案，我发布时可能已经回答并接受了
这个答案是，您的第二个版本调用populate_form，然后传递
单击功能。在这种情况下，这不是您想要的。 .click()真正期望的是什么
是对某些事件触发该事件时要执行的函数的引用。

那是快速的答案；这可能会立即生效，也可能不会立即生效。所以，让我们看一下
作了简单的例子。考虑以下代码：

var Foo = function() {
    var noop = function() { };
    this.callback = noop;
}

Foo.prototype.setCallback = function(callback) {
    this.callback = callback;
}

Foo.prototype.go = function() {
    this.callback.apply(this);
}

这是对jQuery正在执行的操作的过度简化，但它可以使您理解。
我们有一个小类，它有两个方法： setCallback和 go。现在的想法是
当我们调用 go()时，我们想执行我们提供的任何功能。另请注意
默认 callback设置为空函数（或 noop）。

因此，如果我们这样做：

var bar = new Foo();
bar.go()

然后什么都不会发生，但是我们不会得到任何错误。那是因为空的 noop函数被调用了。

现在我们要讨论在JavaScript中定义函数的两种方法： A function expression and a function declaration.

函数斜率如下所示：

function sayHelloDeclaration() {
    alert("Hello from a declaration!");
}

如果我们想调用该函数，我们将编写：

sayHelloDeclaration();

我们会看到警报。但是，如果我们只想引用该函数本身（而不调用它），则只需使用其名称即可：

sayHelloDeclaration;

注意缺少括号；这只是对该函数的引用。从未被告知要执行其工作，因此警报永远不会出现。现在，让我们回顾一下我们的 Foo类，更具体地说是 setCallback函数：

Foo.prototype.setCallback = function(callback) {
    this.callback = callback;
}

请注意，此方法接受一个参数，并将其分配给 this上的属性。基本上，我们要保存对函数的引用
供以后使用。并同时查看 go方法：

Foo.prototype.go = function() {
    this.callback.apply(this);
}

这需要存储在 this.callback中的所有内容，并尝试使用 .apply()调用它，我们也可以使用 .call()（这两者之间的细微差别）。或者只是说 this.callback()。

因此，让我们看看如何使用它。如果我写...

function sayHelloDeclaration() {
    alert("Hello from a declaration!");
}

var bar = new Foo();
bar.setCallback(sayHelloDeclaration);

...您不会看到弹出窗口。但是，添加最后一行...

function sayHelloDeclaration() {
    alert("Hello from a declaration!");
}

var bar = new Foo();
bar.setCallback(sayHelloDeclaration);
bar.go();

...您会看到弹出窗口。这是因为 go()调用了对其一直跟踪的 sayHello的引用。但是，您的第二个示例正在执行以下操作：

function sayHello() {
    alert("Hello from a declaration!");
}

var bar = new Foo();
bar.setCallback(sayHelloDeclaration());

请注意，您会看到弹出窗口，但是我们从未调用过 bar.go()。这是因为 sayHello()正在调用该方法。
该函数的返回值被传递到 setCallback中。如果我们尝试调用 bar.go()，则会收到一个
输入错误，因为我们尝试将 callback设置为不是函数的内容，然后尝试调用它。这是
一个“坏事”。



现在，函数表达式呢？函数表达式是定义函数的另一种方式。类似于在JavaScript中定义字符串或数字的方式。它具有类似但略有不同的形式：

var sayHelloExpression = function() { alert("Hello from expression"); };

这实际上创建了一个新的匿名函数，并将其分配给变量 sayHelloExpression。因此我们可以像前面的示例一样使用它：

var bar = new Foo();
bar.setCallback(sayHelloExpression);
bar.go();

或者我们可以跳过将其全部分配给变量的过程，而只是说：

var bar = new Foo();
bar.setCallback(function() { alert("Hello from expression"); });
bar.go();

现在，其他人已经详细介绍了函数声明和函数表达式之间的细微（但重要）差异，但是在这里要理解的关键是可以在不调用函数的情况下谈论函数。您还可以跟踪对函数的引用，然后在以后调用它。

在第一种情况下，您正在创建一个函数表达式，该函数表达式将使用某些参数来调用另一个函数。就像函数表达式中的 alert一样，只是它是用户定义的函数。但是，您给出的 setCallback仍然是对一个函数的引用，该函数直到以后才会被调用。



最后，让我们看一下在处​​理这样的回调时调用use函数的合理用法。例如，当您有一个函数返回另一个函数时。考虑以下功能：

function createGreeter(name) {
    return function() {
        alert("Hello there " + name + "!!")
    }
}

该函数接受一个参数，然后生成并返回另一个函数。

var sayHiBob = createGreeter("Bob");
sayHiBob();  // alerts "Hello there Bob!!"

这个函数就像我们创建其他函数的小工厂。在这种情况下，与我们的 setCallback方法一起使用时，使用此函数调用是很有意义的，因为我们要将回调函数设置为正在调用的函数的结果。这样的事情。

var bar = new Foo();
bar.setCallback(createGreeter("Joe"));
bar.go(); // alerts "Hello there Joe!!"

还有很多东西要学习，但这是我对这个问题的长期回答。