0

我目前有一个名为 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

  })
}
4

3 回答 3

1

Mheavers，您已用 标记了您的问题promise，这意味着您的思路是正确的。

jQuery 允许从 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. （如果 0（零）的 authorId 有效，则稍微复杂一些）。

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

于 2013-04-09T03:06:08.107 回答
0

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

    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的名称

于 2013-04-08T20:55:25.953 回答
0

如果你想让 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);
}
于 2013-04-08T21:13:29.967 回答