如何在运行另一个函数之前等待 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") returns false，除非我 setTimeout秒，这不是我想要的。我尝试了回调，也尝试了 Promises，但我无法让它发挥作用。我怎样才能让 changeText() 等待，直到 addAnswerContainer.toggle() 完成它的工作？

Answer 1

.toggle( [duration ] [, complete ] )

可选的第二个参数是动画完成后要调用的函数，因此只需使用所需的回调调用 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");
  }
};

然后在 promise 上调用 .then 以链接异步函数：

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

或者，如果您希望 toggleContainer 和 toggleButtons 立即变为运行，并且只在 changeText 之前等待：

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

Answer 2

我可能会在您的 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 语句

则相反

Answer 3

可以 return $.when 从切换函数中承诺并使用 promise() 个要在 $.when 中解析的元素对象。

在承诺链的下一个 then() 中调用下一步

简化的演示

const toggleComplete = function(){
   console.log('finished animation id #', this.id)
}

const toggleButtons = function (){
  // toggleComplete only needed for this demo
  let p1=$('#1').toggle('slow',toggleComplete).promise()
  let p2=$('#2').toggle('slow',toggleComplete).promise()
 
  return $.when(p1,p2)
}

toggleButtons().then(_=>console.log('all animations done')/* change text here*/)

div{display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="1">
One
</div>

<div id="2">
Two
</div>

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

How to wait for a jQuery toggle to finish before running another function?

javascript

jquery

callback

method-chaining

promise

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

How to wait for a jQuery toggle to finish before running another function?

javascript

jquery

callback

method-chaining

promise

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