Question

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

我的问题是，如果我一次收到几条聊天消息，段落文本会立即为每个聊天发件人更新，而不会等待淡入淡出的动画。

现在，对于每条聊天消息，我每次收到聊天行时都会调用以下函数。

setState

在淡入淡出的序列完成之前，我需要做些什么更改才能不更新html？

Answer 1

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

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

小提琴：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，然后再进行真正的动画制作，我们就可以将其拉下来。

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

小提琴：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函数完成淡入淡出的动画？

1 个答案: