Question

我有以下代码：

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 not 选项中，因为我已在其他地方使用此函数。

Answer 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具有可以使用的动画后回调的内置方法。 See this documentation

Answer 2

你可以使用回调吗？

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参数是可选的，以保持向后兼容以前不知道操作何时完成的代码。

在setTimeout（）回调完成后执行JS代码

2 个答案: