javascript - 如何在运行另一个函数之前等待 jQuery 切换完成？

Question

我遗漏了一些非常明显的东西，但我无法让我的方法之一等待 jQuery 切换完成。

我有以下三种方法:

const toggleContainer = function() {
  addAnswerContainer.toggle("slow");
};

const toggleButtons = function() {
  submitAnswerBtn.toggle("slow");
  cancelAnswerBtn.toggle("slow");
};

const changeText = function() {
  if( addAnswerContainer.is(":hidden") ) {
    addOwnAnswerBtn.text("Add your own answer" );
  }
  else {
    addOwnAnswerBtn.text("Hide adding answer");
  }
};

我只想做这样的事情:

const toggleUI = function() {
  toggleContainer();
  toggleButtons();
  changeText(); // executes too fast
};

问题是 changeText() 执行得太快，每次检查时，addAnswerContainer.is(":hidden") 都会返回 false，除非我 setTimeout 它持续几秒钟，这不是我想要的。我尝试了回调，也尝试了 Promises，但我无法让它发挥作用。我怎样才能让 changeText() 等待，直到 addAnswerContainer.toggle() 完成它的工作？

Answer 1

.toggle( [duration ] [, complete ] )

可选的第二个参数是动画完成后要调用的函数，因此只需使用所需的回调调用 toggle 即可。 Promises 是执行此类操作的最佳方式:

const toggleContainer = () => new Promise(resolve =>
  addAnswerContainer.toggle("slow", resolve)
);

const toggleButtons = () => new Promise(resolve => {
    submitAnswerBtn.toggle("slow");
    cancelAnswerBtn.toggle("slow", resolve);
});

const changeText = function() {
  if( addAnswerContainer.is(":hidden") ) {
    addOwnAnswerBtn.text("Add your own answer" );
  }
  else {
    addOwnAnswerBtn.text("Hide adding answer");
  }
};

然后在 promise 上调用 .then 来链接异步函数:

const toggleUI = function() {
  toggleContainer()
    .then(toggleButtons)
    .then(changeText);
};

或者，如果您希望 toggleContainer 和 toggleButtons 同时运行，并且只在 changeText 之前等待:

const toggleUI = function() {
  toggleContainer()
  toggleButtons()
    .then(changeText);
};