Javascript 等待递归jQuery函数完全完成

另一个应该很简单，但却给我带来麻烦。我试图学习jQuery的.del延（）和.promise（）功能，以延迟某些操作，直到递归函数完全完成。目前，我的代码类似于以下代码：

    function showText(setTarget, setMessage, setIndex, setInterval) {
        var defer = jQuery.Deferred();
        var doShowText = function (target, message, index, interval) {
            if (index < message.length) {
                $(target).append(message[index++]);
                setTimeout(function () { doShowText(target, message, index, interval); }, interval);
            }
            else {
                alert("Done!");
                defer.resolve();
            }
        };

        doShowText(setTarget, setMessage, setIndex, setInterval);
        return defer.promise();
    }

function startButtonClick() {
    displayElement($("#getElement"));
    showText($("#getElement > h1"), "This text will slowly write to the screen.", 0, 50).promise()
        .then(alert("Finished."));

}

函数showText（设置目标、设置消息、设置索引、设置间隔）{
var defer=jQuery.Deferred（）；
var doShowText=函数（目标、消息、索引、间隔）{
if（索引<消息长度）{
$（目标）.append（消息[index++]）；
setTimeout（函数（）{doShowText（目标、消息、索引、间隔）；}，间隔）；
}
否则{
警报（“完成！”）；
defer.resolve（）；
}
};
doShowText（设置目标、设置消息、设置索引、设置间隔）；
返回delay.promise（）；
}
函数startButtonClick（）{
displayElement（$（“#getElement”）；
showText（$（“#getElement>h1”），“此文本将缓慢写入屏幕。”，0，50）
。然后（警惕（“完成”）；
}

当此命令运行时，“Finished”警报（我正在尝试延迟）将在第一次执行递归脚本后运行，因此它将在仅打印一个字母（不是预期结果）时出现。然而，一旦打印完所有字母并完成递归，“Done”警报就会正确显示，因此，似乎在此之前不应解析我的defer变量。有人能帮我找出为什么在这里提前调用“已完成”警报吗？感谢您的帮助

---

编辑：我意识到我无意中发布了一个稍旧的代码版本。它已使用正确的版本进行了更新（运行时的行为相同）。

在

开始按钮单击

函数中，您不需要对

显示文本的结果调用
.promise（）
，因为您已经在
显示文本
中执行了该操作。接下来，
then
回调函数的参数应该是一个函数，现在您正在立即调用警报函数，而不是将其作为函数传递，这就是它立即显示的原因，因此只需将其包装在函数中：

function(){ alert("Finished."); }

下面是一个JSFIDLE代码：
在
startButtonClick
函数中，您不需要对
showText
的结果调用
.promise（）。接下来，
then
回调函数的参数应该是一个函数，现在您正在立即调用警报函数，而不是将其作为函数传递，这就是它立即显示的原因，因此只需将其包装在函数中：

function(){ alert("Finished."); }

下面是一个JSFIDLE代码：
，这是因为您实际上是立即执行
警报
函数，而不是传递函数引用

改为这样做：

.then(alert.bind(null, 'finished'));

或

之所以会发生这种情况，是因为您实际上正在立即执行
alert
函数，而不是传递函数引用

改为这样做：

.then(alert.bind(null, 'finished'));

或

这里有一把小提琴，整把小提琴都包在一个漂亮的小东西里：

正如plalx和ctcherry已经指出的，最大的问题是.then调用中缺少函数

HTML

<a href='javascript:void(0)'>Start</a>

<div id='sampleElement'>
    <h1></h1>
</div>

这里有一把小提琴，整把小提琴都包在一个漂亮的小东西里：

正如plalx和ctcherry已经指出的，最大的问题是.then调用中缺少函数

HTML

<a href='javascript:void(0)'>Start</a>

<div id='sampleElement'>
    <h1></h1>
</div>

非常感谢两位回答问题的人！将警报放入函数中修复了它。=）自他的第一个答案出现以来，我就将plalx标记为正确，但两个答案都是正确的，我删除了额外的“promise（）”。再次感谢！非常感谢两位回答问题的人！将警报放入函数中修复了它。=）自他的第一个答案出现以来，我就将plalx标记为正确，但两个答案都是正确的，我删除了额外的“promise（）”。再次感谢！