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

Question

我正在开发一个 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])
}

我需要做哪些更改才能让 html 在淡出序列完成之前不被更新？

Answer 1

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

来源：https://api.jquery.com/promise/

Fiddle: https://jsfiddle.net/pxospknj/

JS:

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

HTML:

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

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

好的，所以默认队列用于效果，因此更新 HTML 会在动画排队时立即发生。 Buuuuut 如果我们传入字符串并用超快速动画伪造队列，然后在执行真正的动画之前在回调期间更新 html，我们就可以将其拉下来。

由于默认的效果队列，此时甚至不需要 promises，但它们在处理异步代码时非常强大，因此请记住它们并阅读它们以备将来使用。

Fiddle: https://jsfiddle.net/pxospknj/4/

HTML:

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

JS:

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

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

How to force jQuery function to finish fading animation before updating text?

html

javascript

jquery

fade