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 ] )

可选的第二个参数是完成动画后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");
  }
};

然后在promises上调用.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");
  }
};

所以这样内部if-else语句只在addAnswerContainer设置为hidden时运行，而另一种方式与最终else if语句

相同

Answer 3

可以从切换功能返回$.when承诺，并使用promise()元素对象在$.when中解析。

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

简化演示

＆＃13;

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*/)

＆＃13;

div{display:none}

＆＃13;

<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>

＆＃13;

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

3 个答案: