fadeIn() 回调函数不等到fadeIn() 完成答案

【问题标题】：fadeIn() callback function not waiting until fadeIn() is completefadeIn() 回调函数不等到fadeIn() 完成
【发布时间】：2018-06-29 05:50:52
【问题描述】：

我正在尝试创建一个将淡入附加到元素的函数。为了确保动画按顺序运行并等待前一个动画完成，我正在尝试使用一个回调函数（递归）和fadeIn。

$(document).ready(function() {
    var messages = [];
    messages.push("First message");
    messages.push("Second message")

    function appendContentText(newText, callbackFunction, callbackArgument) {
        $("<div>" + newText + "</div>").hide().appendTo("#content").fadeIn(1000, callbackFunction(callbackArgument));
    }

    function runMessageSequence(introCounter = 0) {
        if (introCounter == messages.length) return;
        else appendContentText(messages[introCounter], runMessageSequence, introCounter + 1);
    }

    runMessageSequence();
});

不过，这些消息都会一起淡出。所以在我看来，随后的淡入淡出是立即被调用的，而不是在 1000 毫秒延迟之后。

我怀疑这可能与我将“隐藏”、“附加到”和“淡入”等内容应用到选择器的顺序有关。

【问题讨论】：

标签： jquery fadein

【解决方案1】：

我的猜测是您可能是立即调用该函数而不是引用它。如果你只是编辑如下，它会做你想做的事

$("<div>" + newText + "</div>").hide().appendTo("#content").fadeIn(1000, function(){
    callbackFunction(callbackArgument)
});

查看Fiddle

【讨论】：

如果我理解正确，那是因为我的回调包含一个参数导致它被立即调用。非常感谢。我的合资公司有点生疏了。
是的。如果您只输入fadeIn(1000, callbackFunction );，它就可以完成工作，通过添加括号，您可以立即调用它