为什么在jQuery中调用函数需要包装在方法中？

Question

假设我有一个功能:

function myFunction() {
 ...
}

我想从事件处理程序中调用它.为什么这种结构不能调用我的功能？

$(window).resize(myFunction());

但这就是诀窍:

$(window).resize(function(){myFunction()});

这些类型的通话有什么区别？

Answer 1

$(window).resize(myFunction());

立即调用 myFunction并将返回值传递给resize.在函数名称/引用之后添加括号将调用该函数.

另一方面,

$(window).resize(function(){myFunction()});

将匿名函数传递给resize.myFunction仅在调用外部函数时调用.

匿名函数没什么特别的.在这种情况下,它只是某种内联函数定义.您可以使用函数参考轻松替换它:

var handler = function(){myFunction()}; // take out the function definition
$(window).resize(handler);  // and replace it with the new name

现在你可以看到函数名后面没有括号,这意味着,handler没有调用,只传递了引用.

我希望你现在也可以看到在这个例子中创建一个新函数是没有必要的.您只需将引用传递给myFunction:

$(window).resize(myFunction);

但两种方式都有其用例.

$(window).resize(myFunction());如果myFunction 返回应该用作事件处理程序的函数,第一个示例仍然有用:

function myFunction() {
    var handler = function() {};
    return handler;
}

也许重新调整的处理程序取决于传递给的参数myFunction.

如果要myFunction使用某些特定参数调用,则必须传递匿名函数:

function myFunction(a, b) {
    alert(a + b);
}

$(window).resize(function(){
    myFunction(40, 2);
});

更新:

@TJ Crowder对该event对象做了重要评论.每个事件处理程序都将事件对象作为第一个参数传递.如果你将你的功能定义为

function myFunction(event) {
 ...
}

要使用匿名函数(更容易)访问它,您必须通过它:

$(window).resize(function(event){myFunction(event)});

如果你想使用它.