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

我遗漏了一些非常明显的东西，但我不能让我的方法等待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

将其保留几秒钟，这不是我想要的。我尝试过回电，也尝试过承诺，但我就是做不到。如何使

changeText（）

等待，直到

addAnswerContainer.toggle（）

完成它的工作

可选的第二个参数是动画完成后cal的函数，因此只需使用所需的回调调用

toggle

。承诺是这样做的最好方式：

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

然后调用

。然后调用链接异步函数的承诺上的
：

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

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

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

我可以根据您的if-else陈述建议一种简单但聪明的方法：

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

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

const ToggleIfTrue = () => {
  if(addAnswerContainer.is(":hidden") && toggleContainer) { 
    addOwnAnswerBtn.text("Add your own answer" );
  }
  else if (addAnswerContainer.is(!":hidden") && toggleContainer) {
    addOwnAnswerBtn.text("Hide adding answer");
  }
};

因此，只有当
addAnswerContainer
设置为
hidden
时，内部if-else语句才会运行，反之，最终的else-if语句可以返回
。当
从切换函数中承诺，并使用
中要解析的元素对象的
承诺（）
。当
时

在承诺链的next
then（）
中调用下一步

简化演示


consttogglecomplete=function（）{
console.log（'finished animation id#'，this.id）
}
常量切换按钮=函数（）{
//toggleComplete仅适用于此演示
让p1=$（'#1'）.toggle（'slow'，toggleComplete）.promise（）
让p2=$（'#2'）.toggle（'slow'，toggleComplete）.promise（）
返回$.when（p1、p2）
}
toggleButtons（）。然后（=>console.log（'all animations done'）/*在此处更改文本*/）
div{display:none}

一个
两个
您使用回调方法时遇到了什么错误？@AndrewL使用回调方法时，我没有遇到任何错误，但还是太快了。但也就是说，因为我自己进行了回调，我刚刚意识到jQuery切换也接受了回调，所以我在这个解决方案中遇到了同样的问题。addAnswerContainer现在总是隐藏着是的，非常棒，这解决了问题。非常有趣的是它是如何工作的，我现在正试图理解它。当我看到你的评论时，我意识到jQuery切换本身有一个回调，并且我设法使它工作起来：
const toggleUI=function（）{addAnswerContainer.toggle（“慢”），function（）{submitAnswerBtn.toggle（“慢”）；cancelAnswerBtn.toggle（“slow”，function（）{changeText（）；}）；}）