Javascript 如何在更新文本之前强制jQuery函数完成淡入淡出的动画？

我正在开发一个javascript应用程序，它从链接到聊天室的python程序接收消息。javascript应用程序的目标是将每个聊天消息的html段落文本更新为“thank you+user”，然后淡入、延迟、淡出

我的问题是，如果我一次收到多条聊天信息，那么每个聊天发送者的段落文本都会立即更新，而不是等待动画逐渐消失

现在，对于每一条聊天信息，我都会在每次收到聊天热线时调用下面的功能

function fadeInfadeOutMessage(name) {
    $('#twitchname').html("Thank you <br> " +  name).fadeIn(timeFade[0]).delay(timeFade[1]).fadeOut(timeFade[2])
}

功能fadeInfadeOutMessage（名称）{
$（'#twitchname'）.html（“谢谢你”
“+name）.fadeIn（时间段[0]）.delay（时间段[1]）.fadeOut（时间段[2]））
}

---

我需要做哪些更改才能在淡入淡出序列结束之前更新html？

因此，承诺允许您完成操作，然后再做一些事情。因此，看看下面的例子，我让我的messagediv承诺，在动画队列完成之前，他不会做任何事情。第一个承诺立即生效，因为他没有采取任何行动。如果无事可做，承诺总是会立即生效。因此，无论我点击按钮多少次，它总是等待完成它正在做的事情，然后再开始

资料来源：

小提琴：

JS:

//此函数没有更改。我们现在回电话。
//承诺完成后发生的事情
功能fadeInfadeOutMessage（名称）{
$（'somemessage'）.html（“谢谢你”
“+name）.fadeIn（1000）.delay（1000）.fadeOut（1000）；
}
$（“#somebutton”）。在（“单击”，
函数（）{
var元素=$（“#somemessage”）；
//让元素向我们保证，当它做任何事情时
//它这样做将完成我们刚才要求它做的事情
//又是动画了。
元素。promise（）。完成(
函数（）{
fadeInfadeOutMessage（“gary”）；
}
)
}
);

HTML:

go

==============================================

好的，所以默认队列是特效队列，所以在动画排队时会立即更新HTML。Buuuuut如果我们传入字符串并用一个超快速的动画伪造队列，然后在回调过程中更新html，然后再执行真正的动画，我们就可以完成它

在这一点上，由于默认效果队列，甚至不需要承诺，但它们在处理异步代码时非常强大，所以请记住它们，并阅读它们以备将来使用

小提琴：

HTML:

go

JS:

功能fadeInfadeOutMessage（名称）{
//立即隐藏，以便我们在更新之前知道其隐藏，并且可以使用
//在利用效果队列的同时更新html的回调
$（'#somemessage'）。隐藏（0，
函数（）{
$（this.html（“谢谢
”+名称）；
}).fadeIn（1000）。延迟（1000）。衰减（1000）；
//继续正常处理其他动画
}
//初始化我们的计数，以便我们看到不同的字符串正确更新
var计数=0；
$（“#somebutton”）。在（“单击”，
函数（）{
//确保传入字符串，使其具有作用域
fadeInfadeOutMessage（“gary”+计数）；
//更新计数
计数++；
}
);

因此，承诺允许您完成操作，然后再做一些事情。因此，看看下面的例子，我让我的messagediv承诺，在动画队列完成之前，他不会做任何事情。第一个承诺立即生效，因为他没有采取任何行动。如果无事可做，承诺总是会立即生效。因此，无论我点击按钮多少次，它总是等待完成它正在做的事情，然后再开始

资料来源：

小提琴：

JS:

//此函数没有更改。我们现在回电话。
//承诺完成后发生的事情
功能fadeInfadeOutMessage（名称）{
$（'somemessage'）.html（“谢谢你”
“+name）.fadeIn（1000）.delay（1000）.fadeOut（1000）；
}
$（“#somebutton”）。在（“单击”，
函数（）{
var元素=$（“#somemessage”）；
//让元素向我们保证，当它做任何事情时
//它这样做将完成我们刚才要求它做的事情
//又是动画了。
元素。promise（）。完成(
函数（）{
fadeInfadeOutMessage（“gary”）；
}
)
}
);

HTML:

go

==============================================

好的，所以默认队列是特效队列，所以在动画排队时会立即更新HTML。Buuuuut如果我们传入字符串并用一个超快速的动画伪造队列，然后在回调过程中更新html，然后再执行真正的动画，我们就可以完成它

在这一点上，由于默认效果队列，甚至不需要承诺，但它们在处理异步代码时非常强大，所以请记住它们，并阅读它们以备将来使用

小提琴：

HTML:

go

JS:

功能fadeInfadeOutMessage（名称）{
//立即隐藏，以便我们在更新之前知道其隐藏，并且可以使用
//在利用效果队列的同时更新html的回调
$（'#somemessage'）。隐藏（0，
函数（）{
$（this.html（“谢谢
”+名称）；
}).fadeIn（1000）。延迟（1000）。衰减（1000）；
//继续正常处理其他动画
}
//初始化我们的计数，以便我们看到不同的字符串正确更新
var计数=0；
$（“#somebutton”）。在（“单击”，
函数（）{
//确保传入字符串，使其具有作用域
fadeInfadeOutMessage（“gary”+计数）；
//更新计数
计数++；
}
);

使用承诺。使用承诺。在JSFIDLE中稍微修改了代码。请注意，它将跳过数字（这是我现在所处的阶段，它将感谢第一个人，但随后它将跳到数字上的任何地方）。我怎么能不跳过呢？对于（i=0；

// No changes to this function. Its our callback now.
// The thing that happens after promises complete
function fadeInfadeOutMessage(name) {
    $('#somemessage').html("Thank you <br> " +  name).fadeIn(1000).delay(1000).fadeOut(1000);
}


$("#somebutton").on("click",
    function () {
    var element = $("#somemessage");

    // Make the element promise us that when its done doing whatever
    // its doing it will complete what we just asked it to do which
    // is animate again.
    element.promise().done(
        function () {
        fadeInfadeOutMessage("gary");
      }
    )
  }
);

<button id="somebutton">go</button>
<div id="somemessage"></div>

<button id="somebutton">go</button>
<div id="somemessage"></div>

function fadeInfadeOutMessage(name) {
  // Immediate hide so we know its hidden before updating and we can use
  // the callback to update html while taking advantage of the effects queue
  $('#somemessage').hide(0,
    function() {
      $(this).html("Thank you <br> " + name);
    }).fadeIn(1000).delay(1000).fadeOut(1000);
  // Proceed as normal with other animations
}

// Init our count so we see different strings updating properly
var count = 0;
$("#somebutton").on("click",
  function() {
    // Make sure we pass in string so it has scope
    fadeInfadeOutMessage("gary" + count);
    // Update count
    count++;
  }
);