0

我有以下代码：

function newGraphic() {
  $.post('./lexiconGraph.pl', {
    'tag' : this.getAttribute('apolo'),
    'apoloKey' : this.id,
    'h' : surface.h,
    'w' : surface.w,
    'operation' : 'newGraphic'
  }, function(result) {
    minGraphic();
    // STOP AND WAIT //
    document.getElementById('container').innerHTML = result;
    getNodes();
    // STOP AND WAIT //
    maxGraphic();
  });
}

function minGraphic() {
  if (z > 0.01) {
    zoom(parseFloat(z - 0.01));
    setTimeout('minGraphic();', 5);
  }
}

问题是：函数minGraphic创建了一个未知持续时间的“动画效果”（取决于图形的大小）。我需要找到一种方法，使以下行仅在函数minGraphic完成时执行。
有谁知道我该怎么做？

注意：将以下行放在函数minGraphic中不是一个选项，因为我已经在其他地方使用了这个函数。

4

2 回答 2

1

你可以使用回调吗？

function minGraphic(callback) {
  if (z > 0.01) {
    zoom(parseFloat(z - 0.01));
    setTimeout($.proxy(minGraphic, this, callback), 5);
    return;
  }
  callback && callback();
}

然后像这样调用函数：

minGraphic(function () {
    //complete
});

请注意，该callback参数是可选的，以保持与以前对知道操作何时完成不感兴趣的代码保持向后兼容。

于 2013-09-24T13:53:13.097 回答
1

动画完成时使用回调。像这样的东西：

function newGraphic() {
  $.post('./lexiconGraph.pl', {
    'tag' : this.getAttribute('apolo'),
    'apoloKey' : this.id,
    'h' : surface.h,
    'w' : surface.w,
    'operation' : 'newGraphic'
  }, function(result) {
    var afterAnimation = function()
    {
      document.getElementById('container').innerHTML = result;
      getNodes();
      maxGraphic();
    };

    minGraphic(afterAnimation);
  });
}

function minGraphic(cb) {
  if (z > 0.01) {
    zoom(parseFloat(z - 0.01));
    setTimeout(function() { minGraphic(cb); }, 5);
  }
  else
  {
    if(cb) cb();
  }
}

如果我的操作正确，这将触发 miniGraphic 的启动，将回调传递给将在动画完成后执行的函数（即 z 不 > 0.01）。当该事件发生时，如果cb传入回调（），它将调用该函数，从而触发动画的下一步。

如果您有东西需要等待该maxGraphic方法，那么您可以采用相同的概念。

或者，如果您可以使用 jQuery，则 jQuery 具有内置的动画后回调方法，您可以使用这些方法。 请参阅本文档

于 2013-09-24T13:48:18.447 回答