Question

好的，这是一个基本的问题，但是作为一个从未使用过回调功能的人（任何地方）以及在很多人未能理解发生了什么之后，我想也许你可以帮助我。

让我们考虑以下示例：

当html加载时，函数showtext显示，作为参数传递，逐字逐句（只是一个微小而美丽的动画）。当此功能完成时，当显示所有句子时，我想调用另一个显示上述帖子作者的函数showAuthor。

function showText(target, message, index, interval, callback) {
    if (index < message.length) {
        $(target).append(message[index++]);
        setTimeout(function() { showText(target, message, index, interval); }, interval);
    }
    if (callback && typeof(callback) === "function") {
        callback();
    }

}

function showAuthor() {
    var name = '<span>as posted by someone</span>';
    $(name).hide().appendTo(".author").fadeIn(300);
}

$(function() {
    showText("#aboutMeMsg", "Some VERY cool text here", 0, 100, showAuthor());
});

问题

上面代码的问题是函数showAuthor在函数showtext启动的同时执行。这意味着showAuthor能够在 showText完成之前完成。

我认为问题在于我使用函数showText是递归的，但我无法解决问题。

现在为什么会发生这种情况，我无法得到它......

Answer 1

您需要传递不带括号的showAuthor。因为使用括号意味着您正在调用该函数。如下所示：

$(function() {
    showText("#aboutMeMsg", "Some VERY cool text here", 0, 100, showAuthor);
});

然后，当您递归调用callback函数

时，需要传递相同的showText

编辑：

setTimeout(function() { showText(target, message, index, interval, callback); }, interval);

Answer 2

希望这会有所帮助

    function showText(target, message, index, interval, callback) {
      if (index < message.length) {
        $(target).append(message[index++]);
        setTimeout(function() { showText(target, message, index, interval, callback); }, interval);
      } else if (callback && typeof(callback) === "function") {
        callback();
      }
    }

    function showAuthor() {
      var name = '<span>as posted by someone</span>';
      $(name).hide().appendTo(".author").fadeIn(300);
    }

    $(function() {
      showText("#aboutMeMsg", "Some VERY cool text here", 0, 100, showAuthor);
    });

您实际上需要在showAuthor函数中传递回调函数引用showText，而不是调用它showAuthor()。

Answer 3

首先，您应该更正前面回答中指出的回调传递。所以应该是这样的;

$(function() {
    showText("#aboutMeMsg", "Some VERY cool text here", 0, 100, showAuthor);
});

然而，在showText函数中，当您调用回调时，它会同步执行，这就是问题所在。您应该将回调发送到事件队列的末尾，以便它在showText函数之后运行。您可以尝试更改以下行

if (callback && typeof(callback) === "function") {
  callback();
}

到

if (callback && typeof(callback) === "function") {
  setTimeout(callback,0);
}

理解Js函数中的回调

问题

3 个答案: