在setTimeout（）回調完成后執行JS代碼

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);
  }
}

creates an "animation effect" of unknown duration ( ). 問題是：函數創建一個持續時間未知的“動畫效果”（ ）。 finished . 我需要找到一種方法， 只有當函數完成時才會執行以下行。
有誰知道我怎么能這樣做？

---

is not an option, since I already use this function elsewhere. 注意：在函數放置以下行不是一個選項，因為我已在其他地方使用此函數。

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具有可以使用的動畫后回調的內置方法。 請參閱此文檔

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參數是optionnal，以保持向后兼容以前不感興趣知道操作何時完成的代碼。