jquery - 一旦另一个函数返回一个值，如何继续执行一个函数答案

【问题标题】：jquery - how to continue the execution of one function once another function has returned a valuejquery - 一旦另一个函数返回一个值，如何继续执行一个函数
【发布时间】：2013-03-31 01:44:59
【问题描述】：

我目前有一个名为 showAuthorInfo 的函数，它执行动画，然后在动画完成后执行一些其他代码逻辑：

self.showAuthorInfo = function(){
  var authorID = $authorLink.attr('data-author-id'); //PL-INT - determine what info needs be captured here
  var isActive = $modalInfoWindow.hasClass('active');
  self.$modalInfoWindow.animate({ 'bottom': '0px' },200,function(){

    self.$modalInfoWindow.addClass('active');
    self.loadAuthorInfo(authorID);

  })

}

但是，因为我想通过各种函数调用来显示和隐藏这个模态窗口，每次动画完成时执行不同的回调，我想将动画包装成一个函数。问题是，我可以使用上面的函数在动画发生的地方调用一个自定义函数，并让那个动画函数返回一个值给这个函数，然后它可以继续吗？

我会将函数分解为多个函数，但我觉得这可能会变得复杂，尤其是因为我必须传递某些不适用于所有情况的特定于函数的参数（例如，在代码中）上面，如果我要调用一个动画函数，然后是一个 loadAuthorInfo 函数，动画函数必须接受 authorID，以便它可以将它传递给 loadAuthorInfo，即使动画函数只需要 authorID，如果它被 showAuthorInfo 调用） .

这里有什么建议吗？

我不想做的例子：

self.showAuthorInfo = function(){
  var authorID = $authorLink.attr('data-author-id'); //PL-INT - determine what info needs be captured here
  var callback = self.displayAuthorContent();
  self.animateInfoWindow(authorID,callback);
}

self.animateInfoWindow = function(authorID,callback){
  self.$modalInfoWindow.animate({ 'bottom': '0px' },200,function(){

    //create conditional where if there's an authorID, pass it to the callback function, otherwise just call the callback function without parameters

  })
}

【问题讨论】：

showAuthorInfo 是函数调用还是函数声明？看来您正在调用它并声明它。能否提供更多代码？

标签： javascript jquery callback return promise

【解决方案1】：

Mheavers，您已用 promise 标记您的问题，这意味着您的想法是正确的。

jQuery 允许 ad hoc 承诺从 jQuery 集合形成，$(selector).promise(type, target) 通常位于较长方法链的末尾，这可能很少有人理解。 type 默认为“fx”（标准动画队列），目标是可选的（此处不相关）。

因此，self.animateInfoWindow 可以幸福地不知道在它开始的动画完成后会发生什么。它所需要做的就是返回上述类型的承诺，从而允许在调用self.animateInfoWindow 的位置进行链接。

self.animateInfoWindow = function() {
    return self.$modalInfoWindow.animate({'bottom':'0px'}, 200).promise();
};

并且self.showAuthorInfo 可以执行动画后操作，而无需将任何参数传递给self.animateInfoWindow。

self.showAuthorInfo = function() {
    var authorID = $authorLink.data('authorId') || null; //PL-INT - determine what info needs be captured here
    self.animateInfoWindow().done(function() {
        self.$modalInfoWindow.addClass('active');
        self.loadAuthorInfo(authorID);
  });
};

注意，|| null 在第一行，以确保authorID 不是undefined。（如果 authorId 为 0（零）有效，则稍微复杂一些）。

唯一的另一件事是确保self.loadAuthorInfo 能够被通过null。

【讨论】：

不错！这正是我想要做的，只是不知道如何构建它。
嗯，再想一想；使用这种结构，您可以在.done() 处理程序中移动var authorID = ... 行，从而避免self.showAuthorInfo 形成闭包的需要，尽管这样做意味着authorID 在动画开始之前没有被锁定。胺化持续时间为 200 毫秒，这两种方式都可能没什么大不了的。

【解决方案2】：

您可以只将回调传递给动画并避免不必要的函数包装：

    self.showAuthorInfo = function(){
      var authorID = $authorLink.attr('data-author-id'); //PL-INT - determine what info needs be captured here
      var callback = self.displayAuthorContent();
      self.animateInfoWindow(authorID,function(){
        //do something here
      });
    }

    self.someOtherFunction = function(){
      var authorID2 = $authorLink2.attr('data-author-id2'); //PL-INT - determine what info needs be captured here
      var callback2 = self.displayAuthorContent2();
      self.animateInfoWindow(authorID2,function(){
        //do something different
      });
    }


    self.animateInfoWindow = function(authorID,callback){
      self.$modalInfoWindow.animate({ 'bottom': '0px' },200,callback)
    }

这是一个小提琴：http://jsfiddle.net/95kwD/

我真的不知道你想用什么来完成：

var callback = self.displayAuthorContent();

您在调用函数之前调用回调，这是回调函数的全部目的。可能只是函数名variable

【讨论】：

【解决方案3】：

如果你想让 animateWindow 尽可能通用，那么只需有一个回调并且没有参数。回调可以更具上下文感知能力以提供灵活性。

self.showAuthorInfo = function(){
   var authorID = $authorLink.attr('data-author-id');
   var customCallback = function(){
       self.loadAuthorInfo(authorID);
   };
   self.animateInfoWindow(customCallback);
}
self.animateInfoWindow = function(callback){
   self.$modalInfoWindow.animate({ 'bottom': '0px' },200,callback);
}

【讨论】：