Question

我正在学习jQuery，并试图了解回调是如何工作的。我知道它的作用（在完成第一个函数后调用了一些函数），但它的语法让我有点偏执。我有这段代码：

showMenuElement( 0 ); // call to initiate the menu

function showMenuElement( x ) {
    x += 1; // cycling through elements
    if (x < 4) {
        var el = "#menu-" + x;
        $( el ).fadeIn( 1000, showMenuElement(x) ); // show one element, then show next in line
    }
}

...它并不像我想要的那样工作，因为它一次显示所有菜单项！（这里是工作小提琴：fiddle 1）

但是，如果我添加function() {...}部分，就像这样：

showMenuElement( 0 ); // call to initiate the menu

function showMenuElement( x ) {
    x += 1; // cycling through elements
    if (x < 4) {
        var el = "#menu-" + x;
        $( el ).fadeIn( 1000, function() { showMenuElement(x) } ); // show one element, then show next in line
    }
}

然后它就像一个魅力，显示一个又一个项目（根据fiddle 2）。

我正在寻找解释为什么它的表现如此？我认为，既然它是一个回调函数，它会查找要实现的函数的名称，那么写作function() {...}明确地改变了什么？

Answer 1

在您的第一个代码段中，在fadeIn方法中，您调用函数showMenuElement，而不是执行此fadeIn需要回调引用，而不是回调调用，因为您的第二个代码片段工作，你给它一个参考，而不是调用它。

（原谅我的英语不好）

Answer 2

第一种方法不会像你期望的那样工作。因为您正在执行该函数并传递＆＃39; showMenuElement＆＃39;的返回值。作为回调。

但在第二种情况下，您将匿名函数作为回调传递。这是有效的。

从方法中删除（），即将行写为

$（el）.fadeIn（1000，showMenuElement）;

然后回调工作。

但是你必须以不同的方式处理x参数。

jQuery回调语法

2 个答案: